ロゴ
HOME > jQuery・Javascript > jQuery+非同期通信でスマフォライクなチャットを作る その2

jQuery+非同期通信でスマフォライクなチャットを作る その2

2015年7月9日追記 : jQueryチャットの高機能版の記事を書いていますので合わせてどうぞ
Sqlite版 https://studio-key.com/646.html
お絵かき版 https://studio-key.com/1018.html

 

以前、jQueryでチャットを作る記事を書いたのですが、jQueryチャットというキーワードで来られる方が割と多くびっくりしています。LINEなどがある現代ではブラウザチャットなんて過去の遺物だと思ってましたので。

いつかもうちょとマシなものをと思っていたのですが、このお盆中の深夜、ふいに書きたくなり、朝まで掛かって新しいものを作りました。

2014-08-18追記 ちょっとスタンプ機能を付けてみました。素材はhttp://iconhoihoi.oops.jp/からお借りしています。此の場を借りて御礼申し上げます。

chart

 

http://php-powered.net/jQueryChat/

PCで見ると幅350pxに固定されるようにスタイルを書いています。スマフォの場合は幅100%に。



screenshotshare_20140817_103026

今回はより最近のはやりに合わせた吹き出しぽい感じのログ表示にしています。名前やログの色を変更したり、画像もアップロードする事が可能です。スタンプもやる気になればまぁ・・いけると思いますが、それならLINE使いましょうって事で。

ログのリロードに関して

前回のサンプルでも悩みましたが、CometをWEBブラウザで実装するのは無理があるようなので、一定時間ごとに処理される何らかのアクションをトリガーとしてログを更新する必要が有ります。前回はこれを、指定時間でログをリロードする形、いわゆる10年ほど前に流行ったブラウザチャットと同じような仕様で誤魔化していました。

今回はこれをどうにかしようと、PHP側で無限whileさせたり試行錯誤しましたが、色々と微妙でして・・・

そこで、javascript側でsetTimeoutを使い、一定間隔で最新ログがあるかどうかを確認し、新しいログがあれば書き換えるという方法で処理しました。サンプルは10秒間隔でチェックさせています。

サーバー負荷

最新ログをチェックしてリロードすると言っても、最新ログを確認する処理は一人あたり10秒間隔で行う事になりますので、サーバーには当然負担を掛けてしまいます。レン鯖なんかだと怒られる可能性も。大勢でワイワイというより、数人の仲間とかと利用するような形がベストかと思います。

例えばネットゲーム仲間で裏とチャットをしつつ、なんてケースでスマフォを持っていない、或いはLINE等、リアバレするのが嫌だとか、そんな時に便利かなぁと。私は割と仮想空間でもリアル隠さない人なのですが、そういう方は意外と居るようなので。

配布に関して

ソース見るとバレバレですが、夜中にだらだらと書いてましたので、ぐちゃぐちゃです(汗)もうちょっと整理してからオープンソースとして配布しようかなぁと考えています。