Nodejs實作(2) - Socket.io 實現多人即時同步聊天室

Socket.io

Socket.io 官網

簡單來說Socket，由網路的角度來看，socket就是通訊連結的端點；從程式設計者的角度來看，socket提供了一個良好的介面，使程式設計者不需知道下層網路協定運作的細節便可以撰寫網路通訊程式。

因此，socket.io 可以讓我們省去許多底層的工作，提供一個介面讓我們可以方便的實作具有 real-time 功能的 Application。

可以舉例一個就是前些陣子很有名的多人控制神奇寶貝ＸＤ

多人操作神奇寶貝（取自socket.io）

Nodejs與socket.io的簡易實作

以socket.io官網提供的為例：

Client端程式碼如下：

chatroom.html

Server端程式碼如下：

appserv.js

可以注意到我將appserv.js設定 listen 在 3310 port，然後有一個 handler function 它的功能是無論是 http://localhost:3310 或 http://localhost:3310/cwefwe（或任何網址）都會將 chatroom.html 回傳給客戶端。

而這個範例有三個重點socket function用法就是：io.on, socket.on, socket.emit。

io.on 部分可以看到server端正等待著connection，並如果成功的話，會有一個socket參數，而重要的是每一個客戶，都有著不同的socket。

socket.on 與 socket.emit 是一個對稱的方法，當彼此設定好等待事件名稱後如news，執行後將會彼此觸發，執行結果如下：

chatroom.html,appserv.js執行結果

可以看到客戶端在連線成功後，Server 即 emit 一個 news 事件並發送一個 hello:'world' 的 json 給客戶端，而 Server 端也在收 到news 事件後，收到 client emit 的 my other event 事件所傳送的 data。

即時聊天室實作

chat.html

chatServer.js

方法如前述基本範例，只是有更多延伸，只要把以下三個function分清楚即可：

1. socket.emit - 對於一個特定的 socket 傳訊息
2. socket.broadcast.emit - 對於除了目前這個 socket 之外所有線上的 socket 傳訊息
3. io.sockets.emit - 對於所有線上 socket 傳訊息

開啟 node chatServer.js 後，請用兩個不同的瀏覽器分別測試，結果如下：

執行結果

參考資料：

1. socket.io