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

Question

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();
});

Comments

[gouf]

この質問に登場する言語は JavaScript のみですか?
もしそうであれば、Java, JavaScript と2言語あるので、混乱を避けるため省略せず JavaScript と表記するようにしてください

[m.ts10806]

Javaはどこでしょうか。
JavaScriptしかないようですが。

[m.ts10806]

というか作業依頼ですね。

[退会済みユーザー]

日本語がおかしいから釣りかと。

[hino00sns]

日本語おかしくてすみません。
作業依頼はしていないですよー

参考になるソースコードやサンプルがあれば目的を達成できるのでソースコードを求めています。
HTMLしか触れてないとも言いましたし、Javaの経験もありません、なので詳しいことがわからない私からしたら目の前が霧になっててどうしたらいいかわからない、その上で頼んでいるんですが
teratailで質問した結果が、罵倒されてたのでびっくりしました。

変なことを言ってしまったのならごめんなさい。
知識や解決作を共有し合う場所だと勘違いしてました。

出直してきます。

[hino00sns]

JavaScript＝JS　把握です。

混乱を招き申し訳ございません、
できればもう少しやさしい指導を望みますｗｗ
めちゃくちゃ心が痛いですｗｗｗ
私が悪いんですが、もう少しだけでいいんで加減して欲しいです
JavaやJavaScriptの違いもわからなかった初心者です。

大目に見てくれると嬉しいですｗ

ホントにごめんなさいでした。

ちなみに
JavaScriptをJavaと間違った書き込みをしたわけですが
この場合質問欄に記載した文章を訂正修正するべきでしょうか。

教えてください。

yukke_さんに加えていいますｗ
これは人狼ゲームではありませんｗ
なので私を釣らないでください！わたしは白です！
メタ考察になるんですが初心者なので黒ではないです￥￥￥￥
そういう私を黒塗りしたyukke_さんははるかに黒いです！

てことなんですが、
たのしく情報共有したいと思ってます。
大変ご迷惑をおかけしておりますが、お付き合いください。
申し訳ございませんでした。

[退会済みユーザー]

誰が罵倒しているのでしょうか？

[kyoya0819]

怒ってません。

> 作業依頼はしていないですよー

あなたが作業依頼をしているかなんてどうでもいいです。作業依頼と受け取れることが問題です。

> 大目に見てくれると嬉しいですｗ

なにが大目に見て欲しいだよ
それ以前に質問修正する努力くらいしろよ

> HTMLしか触れてないとも言いましたし、Javaの経験もありません、なので詳しいことがわからない私からしたら目の前が霧になっててどうしたらいいかわからない、その上で頼んでいるんですが
> teratailで質問した結果が、罵倒されてたのでびっくりしました。

当たり前、調べてわかることを調べずに聞いたんだから

[hino00sns]

だから作業依頼をしたつもりはないですよごめんなさいねーって解釈はできんのかasuchi0819さんの頭はｗｗｗ

[hino00sns]

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

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

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

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

[hino00sns]

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

違いますか？皆さん。

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

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

[hino00sns]

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

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

Answer 1

まずは

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

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

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

Comments

[hermit19901127]

この意見に同意です。JavaとJavaScriptを同等レベルと考えてる場合、その認識が致命的です。
問題解決以前に、質問主が触れてる言語が「Java」および「JavaScript」である以上、これを混合して考えてるのは危険だと思います。

[hino00sns]

あ、はい・・・なんかひどいことをしてしまいましたごめんなさい。
JSですね、理解ですありがとうございます。

[kyoya0819]

JavaScript -> WEBでよく使われる言語
Java -> ソフトウェアアプリケーションで使われる言語
と覚えてください。
両者は製作者も全く違いますし生い立ちも違います。

[hino00sns]

asuchi0819さんありがとう！
以後気をつけます！

[kyoya0819]

追記しました。

[kyoya0819]

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

[kyoya0819]

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

Answer 2

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

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

...

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

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

Comments

[hino00sns]

逆質問ぜんぜんいいですよ！ｗ
むしろ望みます！

teratailの質問サイトを使うのは始めてでホントに間違った使い方してたらごめんなさいｗｗ
参考になるソースコードやサンプルがあればそのデーターを元に即解決ができるからって言ったら怒られちゃいますかね。。。甘えすぎだったらごめんなさい。

もっと具体的に説明しますね・・・
JS（JavaとJavaScrip)の使い方がわからない私ですが
サンプルでもらったコードを元に
どこにＤＡＴファイルが組み込まれてるか、
どのような形式で書かれてるか、
どこのファイルやソースコードに繋がってるかを研究したいがためにコードを求めています。

現状どのような形式でDatファイルがJSに組み込まれているかわかりませんし、
調べてもそのような情報とはちがう情報が出てきて私自身混乱しています。

なので早期解決を望むべく質問したほうが早いなと、投稿させていただきました。
（得た情報サイト下記に記す）
https://eng-entrance.com/java-file-output
http://ecogis.sfc.keio.ac.jp/online/java/2002/9th/file.htm
https://www.sejuku.net/blog/24744

[oikashinoa]

・まずは最初の質問部分などで用語を間違えている部分を直しましょう。
不要なツッコミを避けるため。後日別の人（あなたも含みます）が検索した時にノイズにならないように。

・サーバーとクライアントの（役割の）違いを確認しましょう
チャットのデータはどこに有るか分かります？

・仕組みを理解して
Perlで実現した方法がJava(Script)といっしょとは限りません。
使おうとしている仕組みを理解して下さい
milkcocoa 公式ドキュメントは必読

・それは解決したいことか？別のやり方はないか？
> リロードしたり閉じたりしてまたチャットページに入るとログが残ってない
チャット終了直前のデータが残せて、次回表示できてそれ美味しいです？
個人的意見ですが、離席後のチャット内容全部がわかった方が嬉しいですね。

・急がば廻れ
サンプルソースもらって動いたとしても、直ぐ行き詰まるでしょう。
なぜ？ロジックを理解してないので自分用に修正できないから。
質問するなら考え方を理解してソースは自分で組むようにしましょう。

[hino00sns]

・サーバーとクライアントの（役割の）違いを確認しましょう
チャットのデータはどこに有るか分かります？
＞もちろんわかりますよー

Perlでのチャットのデータはdatファイルにありますよー、
JSではどこにあるんですか？
jsにおいてdatを使うか使わないかという質問くらい、回答できるのではないでしょうか。

[oikashinoa]

見ず知らずの人に無償で聞く態度じゃないのでこれ以上回答は控えますね。
”こんな簡単な問題分かるだろ。俺は分からんから教えろ”ってかんじなんですかね？

[kyoya0819]

横から失礼します。

まだ自分だけならいいですが他の回答者さんにも同様の態度なので流石に言わせていただきます。

> teratailの質問サイトを使うのは始めてでホントに間違った使い方してたらごめんなさいｗｗ

間違ってるよ。何が笑えるんだよ、

[hino00sns]

その見ず知らずの人たちに頭を下げて丁寧に頼んだ結果モノすっごく叩かれたのですが、
それでいてどうして態度を改めないでいられるのでしょうかｗｗｗｗ

[hino00sns]

しかも質問にたいして回答になっていないものばかり、
当たり前なことを質問しに来たわけではないのですがｗ
大丈夫かしら？
無償で聞かれる態度がやなら聞かなければいいし回答もしなくても良いのでは？
では金を払えば暴言を吐きまくって罵倒していいんですか？
言ってることおかしいですよｗ
そもそも態度でことの有無を決めたいのならメンタリストにでもなってくださいｗ
知恵袋でも全然できますから「知恵袋」てぐぐってくださいｗ

[hino00sns]

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

[hino00sns]

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

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

[hino00sns]

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

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

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

Answer 3

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

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

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

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

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

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

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

Comments

[hino00sns]

あーなるほどｗｗ
ああマジでありがとうです！！ｗ
やっと晴れたｗ

申し訳ないｗｗ

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

本当にありがとうｗ！！

Answer 4

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

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等のサーバサイド言語を組み合わせて動かす必要があります。

Comments

[hino00sns]

Eggpanさんーーｗ

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

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

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

Answer 5

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

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

Comments

[hino00sns]

ありがとう、でも
答える気がないなら答えなくてもいいのよと言っとく

[kyoya0819]

横から失礼

> ありがとう、でも
> 答える気がないなら答えなくてもいいのよと言っとく

いや何様？

ここにいるのは第三者です。互いに顔を知りません。その人に対して聞く態度ではない気がします。

[退会済みユーザー]

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

[hino00sns]

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

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

[hino00sns]

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

なるほどね！
asahina1979さんありがとうｗ