学習

Socket.ioの公式チュートリアルを触ってみる！（後編）

  /
tutorial

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

それでは、本日はここまで。
お読みいただきありがとうございました！

Node.js 初心者向け
RELATED POST