HTML5 - 開發一個本身的websocket服務器

應用：node.js

 

主要步驟：

• 建立文件夾
• 建立app.js（server入口，app爲自定義命名）
• npm init -y (快速建立一個package.json文件）
• 依賴包安裝：nodejs-websocket (github安裝講解)
• npm i nodejs-websocket
• 依賴包在appjs中的使用 (github how to use講解)

https://github.com/sitegui/nodejs-websocket#how-to-use-it

 

配置完畢後啓動：

命令行輸入>   node app.js (app這個名字不固定，具體看你的文件名叫啥）

 

服務端server.js 源碼以下：

 1 const ws = require('nodejs-websocket');//引入依賴包
 2   const POST = 8080;//定義端口
 3 // 建立一個server
 4   const server = ws.createServer(connect => {
 5     //每次只要有新的用戶加入，就會爲當前用戶建立一個connect對象，同時調用一下這個回調函數。
 6     console.log("New connection");
 7     
 8     // text事件：接收用戶請求，獲得用戶傳輸進來的數據。
 9     connect.on("text", data => {
10       // 每當接受到用戶請求事件，這個回調函數就會被觸發。
11       console.log("Received "+data);
12       
13       // sendText/send 方法：接受到請求後，響應一個數據給用戶。由於是connect調用，因此只給當前connet對應的用戶發送，若是須要給全部用戶發送（廣播），須要connections這個數組
14       connect.sendText(data.toUpperCase()+"!!!");//若是直接返回一個data，就會像echo那個服務器同樣的功能，接收到什麼就返回什麼
15     });
16     
17     // 鏈接斷開 觸發close事件
18     connect.on("close", (code, reason) => {
19       console.log("connection closed");
20       code && console.log(code);
21       reason && console.log(reason);
22     });
23     
24     // error：監聽服務異常事件，放置因報錯而斷掉整個服務。
25     connect.on('error', ()=>{
26       // 若是觸發了close事件，就會走error異常事件(刷新也會)，因此必須加error
27       console.log('鏈接出現異常');
28     });
29   });
30 server.listen(POST, ()=>{
31     console.log('webSocket服務啓動成功了，監聽了端口'+ POST);
32 });

 

客戶端demo使用上述配置的服務器。 源碼以下：

示例頁面代碼html：

1   <div class="demo">
2     <input type="text" placeholder="請輸入要發送的內容" id="ipt">
3     <button id="btn">發送請求</button>
4     <p>
5       響應結果以下：
6     </p>
7     <div id="rst"></div>
8     <button id="closeBtn">斷開鏈接</button>
9   </div>

示例頁面代碼js：

 1 // var websocket = new WebSocket('ws://echo.websocket.org');// 使用ws官方提供的服務器
 2 var websocket = new WebSocket('ws://localhost:8080'); // 使用我本身配置的服務器,前提要去websocketServer文件夾中把服務啓動一下:node server.js
 3 websocket.addEventListener('open', function (e) {
 4     console.log(e, websocket.readyState);
 5     // websocket.send('發送一個方法')
 6     // websocket.send('xing.org1^')
 7     btn.onclick = function (a) {
 8       // console.log(a)
 9       websocket.send(ipt.value);
10     }
11   });
12 // 接收返回值：
13   websocket.addEventListener('message', (e) => {
14     console.log(e);
15     rst.innerHTML = e.data;
16   });
17 closeBtn.onclick = function (e) {
18     console.log(e);
19     websocket.close(3000,'主動請求斷開鏈接吧');//斷開鏈接
20   }
21   websocket.addEventListener('close', function (e) {
22     console.log('鏈接斷開了', e);
23   }); 

 

 

connections實現聊天室廣播：

即給全部的用戶（server.connections）都發送消息（sendText）：

function broadcast(server, msg) {// 廣播函數

　　server.connections.forEach(function (conn) {
  　　conn.sendText(msg)

　　})

}

 

 

具體實現方案，見下篇：《websocket的應用 - 實現一個簡易的聊天室效果。》