こんにちは！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の公式チュートリアルで遊んでみました。
公式ページは英語ばかりでとっつきにくいかもしれませんが、分かりやすい画像も掲載されていますので、必要に応じてそちらも参照してみてください。
それでは、本日はここまで。
お読みいただきありがとうございました！
