[Socket 入門系列 02] Socket 發射事件

接著要使用 Socket.IO 這個套件來建立聊天室的功能
而 Socket.IO 分為兩個部分

1. 整合在 Node.js HTTP 服務上的伺服器：socket.io
2. 客戶端的套件，通常使用瀏覽器載入：socket.io-client

這篇名稱會這樣取，真的不是我在開黃腔
因為官方就是使用 Emitting events
這起因於 Socket.IO 可以發送和接收所需的任何事件以及所需的任何物件
只要可以被轉換成 JSON，並且也支持二進制資料，例如圖片
當初的 Twitch Plays Pokémon 就是一個應用

安裝

廢話不多說

npm install socket.io  --save

引入

接著把 index.js 改成以下內容

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});
  
io.on('connection', function(socket){
  console.log('a user connected');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

把剛剛的 http 物件傳給 socket.io 來初始化
接著就可以監聽 connection 事件，在這邊我們先印出在終端機

客戶端連線

下面這段會載入 socket.io-client 套件，
在客戶端去使用已經暴露出來的全域變數 io，如此就可以進行連線
而在 io() 括弧中並未加入任何的網址，代表預設連線到當前提供服務的主機上

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>

這時候，當我們用瀏覽器開啟 http://localhost:3000/
在終端機的視窗就可以看到設定好的提示字串 a user connected

斷開鎖鏈！斷開連結！

seafood！若是對方退出聊天我有沒有辦法知道呢？
當然有的，讓我們加一個 socket 的監聽事件 disconnect

io.on('connection', function(socket){
  console.log('a user connected');
  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
});

重啟服務後，當關閉頁面的視窗時，可以看到終端機提示 user disconnected

接收使用者傳來的訊息

把剛剛 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(e){
     e.preventDefault(); // prevents page reloading
     socket.emit('chat message', $('#m').val());
     $('#m').val('');
     return false;
   });
 });
</script>

接著就是伺服器端要監聽訊息事件
在 index.js 加入，可以加在原本的 connection 事件中
也可以獨立寫成一個新的 io 監聽事件

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    console.log('message: ' + msg);
  });
});

一樣，重啟服務
這時候在聊天視窗打一串字，按下 Send
這時候 html 中的 javascript 就會動作
首先 preventDefault() 會阻止 form 預設的送出行為
接著由 socket 接手，把訊息框的內容使用一個叫做 chat message 的事件發射出去

最後就會在終端機視窗看到我們剛剛輸入的內容
可見真的有發射到伺服器端