質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.00%

JSでのウエブチャットログを残す方法を教えてください

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 401

hino00sns

score 1

JSでリアルタイムチャットログ機能を模索中

いろいろ調べて何とかしてJSでのチャットサンプルを手に入れました。
HTMLしか使いこなせない私ですがこれでやっとチャットを装備して、楽しめそうです。

ただブラウザーそのものをリロードしたり閉じたりしてまたチャットページに入るとログが残ってないので
話がどこまで進んだかわからなかったりします。(チャットそのものは機能している)

そこでログを残すためにいろいろ調べてチャットのアップグレードを目指そうと思ったのですが、
思った以上に時間がかかってしまっています。

教えてください。
PerlでのCGIをつかったチャットは
datファイルを読み込ませれば、ログを保存してくれる仕組みになってました。

JSも同様にdatファイルを読み込ませればログが残りますか?

その場合どのようにソースコードを書けばいいのでしょうか、

サンプルチャットをGIFでドロップボックスに保存してあります。
よかったら使ってみてください。
https://www.dropbox.com/s/fyncnnfh5h5widu/javascript-chat-milkcocoa-demo-master.zip?dl=0

もしJSでログを残す方法やdatを読み込み書き込み保存ができる方法が具体的にあるのなら
ソースコードでの提示を深く望みます!おしえてください。

とにかくログを残したい!現在のソースコード↓

var BAAS = BAAS || {};

BAAS.cocoa = {
        init:function(){
                this.setParameters();
                this.bindEvent();
        },

        setParameters:function(){
            this.$name = $('#jsi-name');
            this.$textArea = $('#jsi-msg');
            this.$board = $('#jsi-board');
            this.$button = $('#jsi-button');
            this.$msgDom = $('<li>');

            //各自登録時に出たコードに書き換え。「chatRoom」は任意でok。複数の部屋を作りたい場合はここを動的にする。
            this.chatDataStore = new MilkCocoa('eggivck94jn.mlkcca.com').dataStore('chatRoom');
        },

        bindEvent:function(){
            var self = this;
            this.$button.on('click',function(){
                    self.sendMsg();
            });

            //pushを監視
            this.chatDataStore.on('push',function(data){
                    self.addText(data.value.user);
                    self.addText(data.value.message);
            });
        },

        //ユーザー、メッセージ送信
        sendMsg:function(){
                if (this.$textArea.val() == ''){ return }

                var self = this;
                var name = this.$name.val();
                var text = this.$textArea.val();
                self.chatDataStore.push({user:name, message:text},function(data){
                        self.$textArea.val('');
                });
        },

        //受け取り後の処理
        addText:function(json){
                var msgDom = $('<li>');
                msgDom.html(json);
                this.$board.append(msgDom[0]);
        }
}

$(function(){
        BAAS.cocoa.init();
});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • hino00sns

    2019/10/13 05:04 編集

    調べて分かることなら聞いてませんよ
    調べても出なかったから 聞いてるんですが。。。

    ちなみに調べてわかる情報だからその質問者への回答を蔑ろにするんですか?
    そんなあなたに回答権はないと思いますw

    調べてわかる情報を持っているなら そのサイトのURLなどを貼って提示して上げるのが回答者でしょうにw

    めちゃくちゃですよasuchi0819さん。。。w

    キャンセル

  • hino00sns

    2019/10/13 05:15

    ちなみに回答者に暴言など一切吐いてませんからねw
    ちょっとJavaとJSの言い間違いでこんなに叩かれるんですよw
    過剰すぎるでしょってところw

    違いますか?皆さん。

    正直に思ったことを言うと、
    「一種の宗教団体に見て取れた。」
    いや知識を持たない駆け出しの人に対して
    ほんの些細失言でここまで大勢の人に叩かれるのですから、

    それは怖いですよw
    ぞっとします、ふつうにやっばい、

    キャンセル

  • hino00sns

    2019/10/13 05:22

    ちなみに言いましたよね、
    >たのしく情報共有したいと思ってます。とw

    はい、ここで一番激怒して不満げに振舞ってなおかつことを荒立ててるのは誰ですか。
    asuchi0819さん あなたです。

    キャンセル

回答 5

+6

まずは

  • JavaとJavaScriptの違い
  • teratailの正しい使い方
  • 一般常識

について学んでください。

ちなみにJavaScriptは略すならJavaではなくJSです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/13 09:28

    追記しました。

    キャンセル

  • 2019/10/13 09:31

    あと、Qiita見ればわかることですがMilkCocoaはサービス終了が確定していますからFBへの移行をお勧めします。

    キャンセル

  • 2019/10/13 10:07

    これ以上はアクションもらっても基本返答致しませんので悪しからず

    キャンセル

+3

本記事で記載しているMilkcocoaは2019年10月30日にサービスが終了するので、firebaseを使用することをお勧めします。
...参考にしたページくらい書きましょうね

肝となる技術を提供しているMilkcocoaの公式サイトは見ましたか?
client側には最終チャット時刻をlocalstoregeに残しておいて
history()で過去のやり取りを再取得ってところでしょうか。

...

ソースコードでの提示を深く望みます! 

あと、なぜソースを求むのでしょうか?逆質問になって申し訳ないですが知りたいです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/13 04:49

    asuchi0819さんに関しては態度を荒立てた覚えはないしなんなら「ありがとうございます」ってお礼もしたはずですがなぜか横槍・・・どうしたの?

    キャンセル

  • 2019/10/13 04:53

    asuchi0819さん・・・ちなみにどのようにして間違っているのか具体的に書き込んでくださいな、
    私は言われたとおり
    参考にしたサイトのURLを貼れといわれ貼りました。
    JavaとJavascriptの区別ができてないので把握して書き直せという指示に従って丁寧に謝罪して訂正した。
    そのあとにソースコードの提示を要求することは作業依頼をしていることだといわれ それも訂正して任意でどうぞと次の質問にも書きましたが?

    ほかになにを訂正すれば良いのでしょうか?

    キャンセル

  • 2019/10/13 04:59 編集

    これら指摘されたことに関して丁寧に謝って訂正したのにも関わらず
    回答の内容は杜撰で安直、

    唯一まともな回答を残したのはasuchi0819さんあなたと、hermit19901127さんくらいですよw
    なのにもかかわらずasuchi0819さんに関して不当な回答を残す回答者への俺の個人的なコメントに激怒してなんか荒らしてるし

    大丈夫なの?と言わざる追えないw 笑いますよ、ヘイトを向けてもいないひとからめっちゃ痛い言葉が飛んでくるんですからwww 何これってなりますw

    キャンセル

checkベストアンサー

+1

新しく質問されてますが、
内容が変わらないので、こちらで。

ブラウザによって、仕様が確定していないなど、まだまだ安定しておりませんが、
 Indexed Database APIというものを使う方法があります。
これはブラウザ上でデータベースを使うというもので、当然リロードしても値などが保持されます。
ただ、前述通りまだ仕様が確定しきっていない未来の技術とも言えますので、注意が必要です。

また、クッキーにチャット履歴などを全部を文字列化したものを保持しとくのも手でしょう。

両者とも、やり方は自身でお調べください。

また、それ以外であれば、
他の回答者さんが仰るとおり、
サーバーサイドテクノロジーを使ったり、
asahina1979さんの仰るとおり、File API使ったりなど、
とかくリロードしても情報がクリアされないようにする必要があるでしょう。

さて、JavaScriptでdatファイルを直接読み込みは、サーバー上ではできるかもしれませんが、
ローカルではできない上、また書き込みに関しては、クライアントサイドではできないので、
(File APIなら可能かも)なんにせよ、上記の技術などで、情報保持する必要があります。

※いずれにせよ、そのやり方教えてくれ、だと丸投げの作業依頼です。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/13 07:02 編集

    あーなるほどww
    ああマジでありがとうです!!w
    やっと晴れたw

    申し訳ないww

    >※いずれにせよ、そのやり方教えてくれ、だと丸投げの作業依頼です。
    重々承知しました。以後気お付けます!

    本当にありがとうw!!

    キャンセル

+1

使えるブラウザが限られてるがFIle API

使えてもブラウザでもデフォルトでは制約してる場合もあるのでそこらへんはプログラムに関係はないので割愛(答える気もない)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/13 00:04

    ブラウザの制約の解除方法はプログラムに関係ないから
    自己責任で理解して解除しないといけない項目

    キャンセル

  • 2019/10/13 04:35

    ??
    うんもちろん顔を知ってたらこんな態度にならないでしょうねw
    その第三者から(答える気もない)と言われたので、
    なら答えなくていいんだよと 正論をいったまでだが。

    何様もないとおもいますよ?w
    何が気に食わないんでしょうかw

    キャンセル

  • 2019/10/13 06:57 編集

    https://www.html5rocks.com/ja/tutorials/file/filesystem/
    >ブラウザの制約の解除方法はプログラムに関係ないから
    >自己責任で理解して解除しないといけない項目

    なるほどね!
    asahina1979さんありがとうw

    キャンセル

+1

質問に提示しているコードだと

  1. MilkCocoaのデータストアを取得
  2. ボタンがクリックされたらデータストアにデータをpush
  3. pushされるタイミングで、htmlにpushするデータを追記

しか処理がなく、ページを表示した際にpush済データを取得する処理がありません。

最初にMilkCocoaのデータストアを取得した際に
strean() history() 等のメソッドを使って、push済データを取得し、htmlに追記すれば良いかと思います。

メソッドに関してはAPIリファレンスのページに詳しく書かれていました。

APIリファレンス(JavaScript, NodeJS)
https://mlkcca.com/document/api-js.html

「JSでログを残す方法」については提示のコードで既に出来ていて、ログを取得していないだけかと思います。
「datを読み込み書き込み保存」するのであれば、JavaScriptのみでは出来ないので、 perl等のサーバサイド言語を組み合わせて動かす必要があります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/13 07:12

    Eggpanさんーーw

    ええ??なにw
    「JSでログを残す方法」については提示のコードで既にできてるんですかww

    Eggpanさん!
    あなたも俺の中ではベストアンサーですよ!
    助かりましたw
    ほんとに分かりやすく解説していただいてまじで
    情報提供ありがとうございます!w
    貴方を待ってました!!

    >「datを読み込み書き込み保存」するのであれば、JavaScriptのみでは出来ない
    把握しました!!!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.00%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる