[Socket 入門系列 03] Socket 廣播事件

上一篇中我們成功讓使用者發射到伺服器
而我們的下一個目標，就是讓伺服器射回去

伺服器端發送訊息

使用 io.emit 就可以發射給全部連線中的人

io.emit('some event', { someProperty: 'some value', otherProperty: 'other value' });

若是想要發給除了發送者之外的其他人
我們叫做 Broadcasting 廣播

io.on('connection', function(socket){
  socket.broadcast.emit('hi');
});

如此就可以在射給其他人的時候不 濺到自己身上 發送給自己

而在這個範例中，發送者自己也要知道自己發了什麼訊息出去
所以我們不使用 broadcasting
在 index.js 監聽 chat message 的部分改為發射事件
把接到的消息發射給所有連線中的客戶端，而不是印出

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

而使用者端，理所當然的也使用 socket.on 來接收剛剛伺服器端發射的事件 chat message
這邊使用者發射和伺服器發射時候的事件命名一樣，也許會造成混淆
使用者端接收到發射事件 a.k.a 被射到之後
就使用 javascript 把內容加入畫面上

<script>
 $(function () {
   var socket = io();
   $('form').submit(function(e){
     e.preventDefault(); // prevents page reloading
     socket.emit('chat message', $('#m').val());
     $('#m').val('');
     return false;
   });
   socket.on('chat message', function(msg){
     $('#messages').append($('<li>').text(msg));
   });
 });
</script>

完成這些之後，重啟服務
應該就可以開多個視窗來測試，在 A 視窗輸入內容
看看 B 視窗會不會顯示？
接著換去 B 視窗輸入，A 視窗應該也要接受到內容

如此一來，就完成了一個最簡單的 socket 聊天室

而貼心的 Socket.io 教學
居然給了一些回家作業讓我們做，在這邊一一列出來

• 當有人連接或斷開連接時，向連接的用戶廣播消息
• 加入使用者自訂暱稱的功能
• 別送訊息給自己，而是在按下送出時直接顯示在畫面上
• 加入 {user} is typing 功能
• 顯示誰在線上
• 加入私人訊息功能

而我自己則是有些想做的練習如下

• 顯示訊息時間
• 顯示在線人數
• 可以分享聊天室網址，邀請別人進入
• 可以依照關鍵字創建不同的聊天室，使用者依照關鍵字配對