標籤:script node 協議 console lan let 發送 ons Koa
伺服器代碼 ( 依賴於 koa2, koa-websocket )
/* 執行個體化外部依賴 */let Koa = require("koa2");let WebSocket = require("koa-websocket");/* 執行個體化 WebSocket, 執行個體化儲存所有上線文數組 並分配監聽的連接埠 */let app = WebSocket(new Koa());let ctxs = [];app.listen(80);/* 實現簡單的接發訊息 */app.ws.use((ctx, next) => { ctxs.push(ctx); ctx.websocket.on("message", (message) => { console.log(message); for(let i = 0; i < ctxs.length; i++) { if (ctx == ctxs[i]) continue; ctxs[i].websocket.send(message); } });});
前端代碼 ( 該頁面可同時開啟多個進行聊天 )
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <input type="text" id="content" /> <input type="button" value="發送" id="send" /></body><script type="text/javascript"> /* 封裝 WebSocket 執行個體化的方法 */ var CreateWebSocket = (function () { return function (urlValue) { if(window.WebSocket) return new WebSocket(urlValue); if(window.MozWebSocket) return new MozWebSocket(urlValue); return false; } })(); /* 執行個體化 WebSocket 連線物件, 地址為 ws 協議 */ var webSocket = CreateWebSocket("ws://localhost"); /* 接收到服務端的訊息時 */ webSocket.onmessage = function (msg) { console.log("服務端說:" + msg.data); }; /* 關閉時 */ webSocket.onclose = function () { console.log("關閉串連"); }; /* 發送訊息 */ document.getElementById("send").onclick = function () { var str = document.getElementById("content").value; webSocket.send(str); }</script></html>
Node + H5 + WebSocket + Koa2 實現簡單的多人聊天