WebSocket · ThinkJs2.0開發手冊

[TOC=2,3] 項目里經常要要使用 WebSocket 來實現聊天等功能，ThinkJS 支持多種 WebSocket 庫，如：`socket.io`，`sockjs`?等，并對這些庫進行了一些簡單的包裝，讓使用的接口一致。 ## 開啟 WebSocket WebSocket 功能默認是關閉的，項目如果需要開啟，可以修改配置文件?`src/common/config/websocket.js`： ~~~ export default { on: false, //是否開啟 WebSocket type: "socket.io", //使用的 WebSocket 庫類型，默認為 socket.io allow_origin: "", //允許的 origin adapter: undefined, // socket 存儲的 adapter，socket.io 下使用 path: "", //url path for websocket messages: { // open: "home/websocket/open", } }; ~~~ 需要將配置?`on`?的值修改為 true，并重啟 Node.js 服務。 ## 事件到 Action 的映射 ThinkJS 里對 WebSocket 的包裝遵循了?`socket.io`?的機制，服務端和客戶端之間通過事件來交互，這樣服務端需要將事件名映射到對應的 Action，才能響應具體的事件。配置在?`messages`?字段，具體如下： ~~~ export default { messages: { open: "home/socketio/open", // WebSocket 建立連接時處理的 Action close: "home/socketio/close", // WebSocket 關閉時處理的 Action adduser: "home/socketio/adduser", //adduser 事件處理的 Action } } ~~~ 其中?`open`?和?`close`?事件名固定，表示建立連接和斷開連接的事件，其他事件均為自定義，項目里可以根據需要添加。 ## Action 處理通過上面配置事件到 Action 的映射后，就可以在對應的 Action 作相應的處理了。如： ~~~ export default class extends think.controller.base { /** * WebSocket 建立連接時處理 * @param {} self [] * @return {} [] */ openAction(self){ var socket = self.http.socket; this.broadcast("new message", { username: socket.username, message: self.http.data }); } } ~~~ ### emit Action 里可以通過?`this.emit`?方法給當前 socket 發送事件，如： ~~~ export default class extends think.controller.base { /** * WebSocket 建立連接時處理 * @param {} self [] * @return {} [] */ openAction(self){ var socket = self.http.socket; this.emit("new message", "connected"); } } ~~~ ### broadcast Action 里可以通過?`this.broadcast`?方法給所有的 socket 廣播事件，如： ~~~ export default class extends think.controller.base { chatAction(self){ var socket = self.http.socket; //廣播給除當前 socket 之外的所有 sockets this.broadcast("new message", {msg: "message", username: "xxx"}); } } ~~~ `注：`?broadcast 方法默認是給除去當前 socket 的所有 sockets 發送事件，如果想包含當前的 socket，可以設置第三個參數值為?`true`。 ~~~ export default class extends think.controller.base { chatAction(self){ var socket = self.http.socket; //廣播給所有的 sockets，包含當前的 socket this.broadcast("new message", {msg: "message", username: "xxx"}, true); } } ~~~ ### socket 對象 Action 里可以通過?`this.http.socket`?拿到當前的 socket 對象。 ### 事件數據 Action 里可以通過?`this.http.data`?拿到發送過來事件的數據。 ## socket.io `socket.io`?對 WebSocket 前后端都有封裝，使用起來非常方便。 ### io 對象在 Action 里可以通過?`this.http.io`?來獲取?`io`?對象，該對象為 socket.io 的一個實例。 io 對象包含的方法請見?[http://socket.io/docs/server-api/#server()](http://socket.io/docs/server-api/#server())。 ### 設置 path 設置被 socket.io 處理的路徑，默認為?`/socket.io`。如果需要修改，可以修改下面的配置： ~~~ export default { path: "/other_path" } ~~~ `注：`?服務端修改了處理的路徑后，客戶端也要作對應的修改。 ### 設置 adapter 使用多節點來部署 WebSocket 時，多節點之間可以借助 Redis 進行通信，這時可以設置 adapter 來實現。 ~~~ import redis from "socket.io-redis"; export default { adapter: function(){ return redis({ host: "localhost", port: 6379 }); } } ~~~ 具體請見?[http://socket.io/docs/using-multiple-nodes/](http://socket.io/docs/using-multiple-nodes/)。 ### socket.io client 瀏覽器端需要引入 socket.io client，下載地址為：[http://socket.io/download/](http://socket.io/download/)。 ~~~ var socket = io("http://localhost:8360"); //發送事件 socket.emit("name", "data"); //監聽事件 socket.on("name", function(data){ }) ~~~ 也可以直接引入一個 CDN 地址：[http://s4.qhimg.com/static/535dde855bc726e2/socket.io-1.2.0.js](http://s4.qhimg.com/static/535dde855bc726e2/socket.io-1.2.0.js)。 ### 校驗用戶登錄 WebSocket 建立連接時可以拿到 cookie，所以可以在?`open`?對應的 Action 里校驗用戶是否登錄。如： ~~~ export default class extends think.controller.base { * openAction(){ let userInfo = yield this.session("userInfo"); if(think.isEmpty(userInfo)){ } } } ~~~ ### 聊天代碼示例聊天示例代碼請見：[https://github.com/75team/thinkjs2-demos/tree/master/websocket-socket.io](https://github.com/75team/thinkjs2-demos/tree/master/websocket-socket.io)。 ## SockJS ### 配置使用 SockJS 庫，需要將配置里的 type 修改為?`sockjs`，如： ~~~ export default { type: "sockjs" } ~~~ ### sockjs 對象 Action 里可以通過?`this.http.sockjs`?拿到 sockjs 對象，該對象為 SockJS 類的一個實例。 ### 設置 path 設置被 SockJS 處理的路徑，默認為?`/sockjs`，可以通過下面的配置修改： ~~~ export default { path: "/websocket" } ~~~ ### SockJS client 瀏覽器端需要引入 SockJS client，下載地址為：[https://github.com/sockjs/sockjs-client](https://github.com/sockjs/sockjs-client)。 SockJS client 并沒有做什么封裝，所以需要額外做一層包裝，變成事件的方式，以便跟包裝后的服務端對應。包裝方式參考如下： ~~~ SockJS.prototype.emit = function(event, data){ this.send(JSON.stringify({event: event, data: data})); } SockJS.prototype.events = {}; SockJS.prototype.on = function(event, callback){ if(!(event in this.events)){ this.events[event] = []; } this.events[event].push(callback); } SockJS.prototype.onmessage = function(e) { var data = JSON.parse(e.data); var callbacks = this.events[data.event] || []; callbacks.forEach(function(callback){ callback && callback(data.data); }) }; SockJS.prototype.onopen = function() { this.onmessage(JSON.stringify({data: {event: "open"}})); }; SockJS.prototype.onclose = function() { this.onmessage(JSON.stringify({data: {event: "close"}})); }; ~~~ 通過上面的包裝后就可以通過事件的方式來接收和發送消息了，如： ~~~ var socket = new SockJS("/sockjs"); //這里的路徑必須和配置里相同，如果沒有配置則為 /sockjs //監聽事件 socket.on("add user", function(data){ }); //發送事件 socket.emit("new message", "xxx"); ~~~ ### 校驗用戶登錄 SockJS 為了安全，在建立連接時不提供相關的 cookie，所以無法通過 cookie 來校驗用戶是否登錄。可以先在頁面里輸出一個 token，建立連接時將該 token 發送用來校驗是否已經登錄。具體請見：[https://github.com/sockjs/sockjs-node#authorisation](https://github.com/sockjs/sockjs-node#authorisation)。 ### 聊天代碼示例聊天示例代碼請見：[https://github.com/75team/thinkjs2-demos/tree/master/websocket-sockjs](https://github.com/75team/thinkjs2-demos/tree/master/websocket-sockjs)。 ## nginx 反向代理 nginx 從?`1.3.13`?版本開始支持反向代理 WebSocket 請求，如果在項目中使用，需要在 nginx 配置文件中添加如下的配置： ~~~ proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; ~~~ `注`：使用?`thinkjs`?命令創建項目時，會自動創建 nginx 配置文件，并且配置文件已經包含了上面 2 個配置，可以直接使用。 nginx 代理 WebSocket 請求的文檔請見?[http://nginx.org/en/docs/http/websocket.html](http://nginx.org/en/docs/http/websocket.html)。