こんにちは!chrysealmです。
Socket.ioの公式チュートリアルを触ってみよう企画の後編になります。
改めて、公式チュートリアルはこちらになります。
それでは早速チュートリアルの後半部分に入りましょう!
ブラウザから送信したメッセージを出力する
今回は、ブラウザで入力したメッセージを受け取り、ターミナル上で出力してみましょう。
index.html内のscriptの箇所を以下のように変更してください。
<script src="/socket.io/socket.io.js"></script> <script src="https://code.jquery.com/jquery-1.11.1.js"></script> <script> $(function () { var socket = io(); $('form').submit(function(){ socket.emit('chat message', $('#m').val()); $('#m').val(''); return false; }); }); </script>
続けて、index.jsのconnectionの箇所を以下のように変更します。
io.on('connection', function(socket){ socket.on('chat message', function(msg){ console.log('message: ' + msg); }); });
これで、ブラウザから送信したメッセージを出力することができるはずです。
index.jsの再起動、ブラウザの更新をして、ブラウザ下部の入力欄からメッセージを送信してみてください。
送信したメッセージはターミナルで出力されましたか?
簡易的なチャットを作る
チュートリアルの最後は、ブラウザで動く簡易的なチャットを作成します。
まずは、index.jsのconnectionを下記のように置き換えてください。
io.on('connection', function(socket){ socket.on('chat message', function(msg){ io.emit('chat message', msg); }); });
そして、index.htmlのscriptを以下のように変更します。
<script> $(function () { var socket = io(); $('form').submit(function(){ socket.emit('chat message', $('#m').val()); $('#m').val(''); return false; }); socket.on('chat message', function(msg){ $('#messages').append($('<li>').text(msg)); }); }); </script>
おめでとうございます!これでチャットができました。
早速、再起動と更新を行って動作を確認してみましょう。
別々のブラウザ、または別々のタブを開き、http://localhost:3000 にアクセスしてください。
アクセスしたら、お好きな方のブラウザ・タブからメッセージを送信します。
すると、一方から送ったメッセージが、もう一方のページにも表示されるはずです。
実際に動くところを見ると面白いですね。
おわりに
前回と今回にかけて、Socket.ioの公式チュートリアルで遊んでみました。
公式ページは英語ばかりでとっつきにくいかもしれませんが、分かりやすい画像も掲載されていますので、必要に応じてそちらも参照してみてください。
それでは、本日はここまで。
お読みいただきありがとうございました!