node-socket(即時通訊)實現簡易聊天室
阿新 • • 發佈：2020-07-22
socket (套接字 包含資料內容) 實現網路通訊
網路上的兩個程式 通過一個雙向的通訊連線 實現資料的互動,這個連結的一端稱之為 socket
伺服器端 socket 功能
- 1、建立 伺服器 繫結 IP + 埠 監聽埠
- 2、監聽 客戶端的連結
- 3、監聽 客戶端發來的訊息
- 4、把來自客戶端的訊息 轉發給其他的線上客戶端
- 5、監聽 客戶端的關閉
客戶端 socket 功能
- 1、建立 客戶端 socket
- 2、連線伺服器 的 socket
- 3、傳送訊息 給 伺服器
- 4、接收伺服器發來的訊息
- 5、監聽 伺服器 關閉 或者 異常
雙向通訊 + 互相監聽
客戶端程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>聊天室</title> <style> .box { width: 500px; height: 300px; margin: 0 auto; border: 1px #000 solid; overflow: auto; } #xx { text-align: center; } </style> </head> <body> <div class="box"> </div> <div id="xx"> <input type="text" name="" id="txt"><input type="button" value="傳送" id="btn"> </div> </body> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script> var name = '卡卡西'; var str = ''; var scoket = new WebSocket('ws://192.168.53.212:10086'); scoket.onopen = function () { scoket.send(`我是${name},我上線了`); } scoket.onmessage = function (message) { str = `<p>${message.data}</p>`; $('.box').html($('.box').html() + str) } // 監聽 伺服器端 關閉 scoket.onclose = function () { console.log("伺服器已經關閉停止服務...") } scoket.onerror = function () { console.log("伺服器被黑了...") } $('#btn').click(function () { scoket.send(`${name}說:` + $('#txt').val()); }) </script> </html>
服務端程式碼
const ws = require('ws'); const WebSocketServer = ws.Server; // 1. 建立 socket 2. 監聽埠 const wss = new WebSocketServer({ port: 10086 }); var count = 100; var info = "WUHAN2002__"; var obj = {}; // 3. 監聽客戶端的連結 wss.on('connection', function (ws) { // socket 客戶端連結 物件 socket count++; ws.name = info + count; obj[ws.name] = ws; ws.on('message', function (message) { fn(message) }) ws.on('close', function () { console.log(ws.name + '我下線了...'); delete obj[ws.name]; fn(ws.name + '我下線了...') }) }); function fn(message) { for (var i in obj) { obj[i].send(message); } }