one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【19:チャットアプリ】JQueryのAjaxとPHPでリアルタイムに外部データを読み書きする

f:id:seintoseiya:20150710002417p:plain
プロジェクトNo.19:チャットアプリ

JQueryで結構簡単にAjaxが使えるということで、
せっかくなら非同期通信のメリットを活かせるリアルタイムな簡易チャットを作ってみた。

Ajaxとは

Asynchronous JavaScript + XMLの略で非同期通信をするための技術です。
簡単に言うと、

  • ページの遷移なしでページ内の要素を変更できる
  • サーバーにデータを送受信できる

前者だけだとjavascriptだけでもできますが、サーバー処理をかまして最新のデータを表示できるというところに大きなメリットがあります。
例えば、Twitterなんかのプラグインを見ると、リアルタイムにタイムラインが画面遷移せずに表示されるのがわかるかと思います。
GoogleMapでは画面をドラッグしたりズームする度に画像データ(?)を読み込むことで、必要なデータのみをユーザに表示しています。
これらはAjaxを使って画面遷移せずにサーバー上のデータを取得して表示しているというわけですね。

$.getメソッド

このメソッド(または$.post)を使うことで一番簡単にAjaxを実装できます。
load()や$.ajaxを使った方ができる事が多いですが(通信失敗時のコールバック処理など)、
今回は簡易版という事でこちらを使います。

JavaScript
$('#greet').click(function(){
    $.get('bbs.php', {
    user: $('#user').val(),
    message: $('#message').val(),
    mode: "0" // 書き込み
    }, function(data){
    $('#result').html(data);
    // scTarget();
    });
});

LINEっぽいデザイン

こちらを参考にさせてもらいました。
http://nelog.jp/line-bolloon-css
background: #85e249の緑がやっぱLINEっぽいですね!

その他にも吹き出しCSSジェネレータというのもありました。
http://web-dou.com/tool/css_gen_fdiv.php

今度、これらを頼らずに自分で作ってみよう。。。

半角英字の長文が枠の最後まで行くと折り返さない

これはこちらを参考にword-break: break-all;を使って解決しました。
http://nanto.asablo.jp/blog/2013/06/18/6869571

PHPでファイルの読み書き

JQueryの$.getメソッドからGETパラメータを受け取り、それを外部のファイルに書き込みします。
データの書き込みはfopen、fwrite、fcloseを使用し、
読み込みにはfile_get_contentsを使用しました。



まだまだ追加したい機能やセキュリティ的に問題がありまくりなので、
バージョンアップ版が出来次第、こちらでも紹介したいと思います。

全ソースはこちら

github.com