【WebSocket】使用ws搭建一個簡單的在線聊天室

前言

什么是WebSockets？

WebSockets 是一種先進的技術。它可以在用戶的瀏覽器和服務器之間打開交互式通信會話。使用此 API，你可以向服務器發送消息并接收事件驅動的響應，而無需通過輪詢服務器的方式以獲得響應。
webscokets 包括webscoket接口、CloseEvent接口和MessageEvent接口。

什么是WebSocket?

WebSocket是一種基于TCP的全雙工通信協議，可以更好的節省資源和帶寬實現即時通訊，是一種持久化的協議。

什么是ws?

ws 是一個簡單易用、速度極快、經過全面測試的 WebSocket 客戶端和服務器實現庫。

搭建簡易WebSocket服務器

安裝 ws

npm安裝

npm install ws

使用ws

ws使用之前需要導入。

ws屬性介紹

new WebSocketServer(options[, callback])

options {Object} 配置對象。
- backlog {Number} 待處理連接隊列的最大長度。
- clientTracking {Boolean} 指定是否跟蹤客戶。
- handleProtocols {Function} 用于處理 WebSocket 子協議的函數。請參見下面的說明。
- host {String} 綁定服務器的主機名。
- maxPayload {Number} 允許的最大報文大小（字節）。默認為 100 MiB（104857600 字節）。
- noServer {Boolean} 啟用無服務器模式。
- path {String} 只接受與此路徑匹配的連接。
- perMessageDeflate {Boolean|Object} 啟用/禁用 permessage-deflate 功能。
- port {Number} 綁定服務器的端口。
- server {http.Server | https.Server} 預先創建的 Node.js HTTP/S 服務器。
- skipUTF8Validation {Boolean} 指定是否跳過文本和關閉信息的 UTF-8 驗證。默認為 false。只有在客戶端受信任時才設為 true。
- verifyClient {Function} 用于驗證輸入連接的函數。請參閱下文說明。(不鼓勵使用)。
- WebSocket {Function} 指定要使用的 WebSocket 類。它必須是從原始 WebSocket 擴展而來。默認為 WebSocket。
callback {Function} 回調函數,將添加到 http 服務’listening’事件上。

創建一個新的服務器實例。必須提供端口、服務器或 noServer 中的一個，否則會出錯。如果設置了端口，HTTP 服務器將自動創建、啟動和使用。若要使用外部 HTTP/S 服務器，請僅指定服務器或 noServer。在這種情況下，必須手動啟動 HTTP/S 服務器。無服務器 "模式允許 WebSocket 服務器與 HTTP/S 服務器完全分離。例如，這樣就可以在多個 WebSocket 服務器之間共享一個 HTTP/S 服務器。

事件模型

Event:‘close’ : 服務器關閉時發出。只有在內部創建 HTTP 服務器時，該事件才會依賴于 HTTP 服務器的 "關閉 "事件。在其他所有情況下，該事件都是獨立發生的。
Event: ‘connection’ : 握手完成時發出。請求是客戶端發送的 http GET 請求。用于解析權限頭、cookie 頭和其他信息。
- 參數 1 websocket {WebSocket}
- 參數 2 request {http.IncomingMessage}
Event: ‘error’ : 當底層服務器出現錯誤時發出。
- 參數 1 error {Error}
Event: ‘headers’ ：在作為握手的一部分將響應標頭寫入套接字之前發出。這樣，您就可以在發送前檢查/修改標頭。
- 參數 1 headers {Array}
- 參數 2 request {http.IncomingMessage}
Event: ‘listening’ ：當底層服務器已綁定時發出。
Event: ‘wsClientError’：在建立 WebSocket 連接前發生錯誤時發出。socket 和 request 分別是發生錯誤的套接字和 HTTP 請求。該事件的監聽器負責關閉套接字。當 "wsClientError "事件發生時，沒有 http.ServerResponse 對象，因此任何 HTTP 響應（包括響應標頭和正文）都必須直接寫入套接字。如果沒有該事件的監聽器，套接字將以包含描述性錯誤信息的默認 4xx 響應關閉。
- error {Error}
- socket {net.Socket|tls.Socket}
- request {http.IncomingMessage}

WebSocket

它擴展了 EventEmitter.WebSocket 類。客戶端的可以用這個連接 websocket 服務，在 websocket 服務中也需要用它來發送消息。

就緒狀態常量

常量	值	描述
CONNECTING	0	連接尚未打開。
OPEN	1	連接已打開，隨時可以進行通信。
CLOSING	2	連接正在關閉。
CLOSED	3	連接已關閉。

websocket服務器實現

這是一個簡單的ws服務器，他主要功能是，記錄連接在線的用戶，以及向所以在線狀態的客戶端廣播轉發收到的消息。
運行命令：
假如你服務文件名是server.js，則：

	node  server.js

const { WebSocketServer } = require("ws");const userSet = new Set(); //  用戶列表
//  ws服務器
const server = new WebSocketServer({port: 8080,perMessageDeflate: {zlibDeflateOptions: {// See zlib defaults.chunkSize: 1024,memLevel: 7,level: 3,},zlibInflateOptions: {chunkSize: 10 * 1024,},// Other options settable:clientNoContextTakeover: true, // Defaults to negotiated value.serverNoContextTakeover: true, // Defaults to negotiated value.serverMaxWindowBits: 10, // Defaults to negotiated value.// Below options specified as default values.concurrencyLimit: 10, // Limits zlib concurrency for perf.threshold: 1024, // Size (in bytes) below which messages// should not be compressed if context takeover is disabled.},},() => {console.log("創建成功");}
);server.on("open", function open() {console.log("打開 connected");
});server.on("close", function close(e) {console.log("關閉連接 disconnected", e);
});server.on("connection", (ws, req) => {const query = getQuery(req.url);console.log(query, "req::");if (userSet.has(query.username)) {sendMsg(ws, {type: "error",data: "用戶名重復",});ws.close();} else {userSet.add(query.username);sendMsg(ws, {type: "success",data: "連接成功",});sendMsg(ws, {type: "user",data: Array.from(userSet),});}const ip = req.socket.remoteAddress;const port = req.socket.remotePort;const clientName = ip + port;console.log("%s 連接 ", clientName);ws.username = query.username;ws.on("message", function incoming(message) {let msg = handleMessage(message);server.clients.forEach((client) => {console.log("username::", client.username);//  廣播消息if (client.readyState === ws.OPEN) {//  發送用戶列表if (msg.type === "tips" || msg.type === "close") {sendMsg(client, {type: "user",data: Array.from(userSet),});}sendMsg(client, msg);}});});ws.on("close", function close(e) {console.log("關閉", e);});
});function handleMessage(data) {let message;let msg;if (typeof data === "string") {message = data;} else {message = JSON.parse(data.toString());}if (typeof message === "string") {msg = message;} else if (typeof message === "object" && message.type) {console.log(message, "data::");switch (message.type) {case "name":msg = {type: "tips",data: `用戶${message.data}連接了`,};break;case "info":msg = {type: "info",data: message.data,};break;case "close":msg = {type: "tips",data: `用戶${message.data}退出`,};userSet.delete(message.data);break;}} else {msg = "暫不識別的內容";}return msg;
}function getQuery(url) {let paramsStr = decodeURIComponent(url.split("?")[1]);let paramsArr = paramsStr.split("&");let params = {};paramsArr.forEach((str) => {let attr = str.split("=");params[attr[0]] = attr[1];});return params;
}function sendMsg(ws, msg) {if (!ws) {console.error("沒有連接");return;}ws.send(JSON.stringify(msg));
}

前端實現

我頁面是使用的是html實現的websocket。沒有依賴ws,所以直接瀏覽器打開即可。
使用前需運行ws服務器。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {margin: 32px 10%;border-radius: 16px;border: 1px solid #000;overflow: hidden;}.box h1 {margin: 32px;text-align: center;}.info-box {padding: 32px;height: 88px;background-color: #eee;}.info-box .name-box {display: flex;align-items: center;}.info-box .name-box .edit-name {border: 0;color: skyblue;outline: none;}.chat-box {display: flex;margin-top: 32px;height: 50vh;border-top: 1px solid #000;}.user-box {flex-shrink: 0;min-width: 44px;max-width: 200px;border-right: 1px solid #000;}.chat-frame {flex: 1;}.message-box {display: flex;flex-direction: column;width: 100%;height: 80%;border-bottom: 1px solid #000;overflow-y: auto;}.message-box .tips-box {text-align: center;color: #999;font-size: 14px;}.msg-box {align-self: flex-start;}.msg-box-top {font-size: 16px;color: skyblue;}.msg-box-top span {font-size: 12px;color: #006eff;margin-right: 16px;}.msg-box-content {display: inline-block;width: 100%;padding: 5px 10px;line-height: 20px;background-color: skyblue;font-size: 18px;color: #fff;border-radius: 7px 7px 12px 7px;}.msg-box-right {align-self: flex-end;}.msg-box-right .msg-box-content {display: inline-block;width: 100%;padding: 5px 10px;line-height: 20px;background-color: rgb(35, 185, 35);font-size: 18px;color: #fff;border-radius: 7px 7px 7px 12px;}.send-box {display: flex;align-items: center;justify-content: center;gap: 16px;height: 20%;}.send-box textarea {width: 80%;resize: none;}.send-box .send-btn {flex-shrink: 0;width: 10%;min-width: 32px;height: 66px;}.hide {display: none !important;}.show {display: block !important;}</style>
</head><body><div class="box"><h1>在線聊天室</h1><!-- 個人信息模態框 --><div class="info-box"><div><label for="name1">請輸入昵稱：</label><input name="name1" class="name-input" type="text" placeholder="請輸入聊天昵稱"> <button class="ok-name">確定</button></div><div class="hide"><div class=" name-box"><div class="name-show"></div><button class="edit-name">#修改</button></div><button class="link-btn">連接聊天室</button><button class="out-btn hide">退出聊天室</button></div></div><!-- 在線聊天模態框 --><div class="chat-box hide"><div class="user-box"><h2>用戶列表</h2><div class="user-list"></div></div><div class="chat-frame"><div class="message-box"></div><div class="send-box"><textarea class="send-content" name="message" id="" rows="5" maxlength="150"></textarea><button class="send-btn">發送</button></div></div></div></div><script>let ws;let nickName; //  昵稱const okNameBtn = document.querySelector('.ok-name')const nameInput = document.querySelector('.name-input')const editNameBtn = document.querySelector('.edit-name')let userDom = document.querySelector('.user-list')let msgDom = document.querySelector('.message-box')const linkBtn = document.querySelector('.link-btn')const outBtn = document.querySelector('.out-btn')const chatBox = document.querySelector('.chat-box')const nameShowDiv = document.querySelector('.name-show')const sendBtn = document.querySelector('.send-btn')const sendContentDom = document.querySelector('.send-content')okNameBtn.onclick = function () {if (!nameInput.value || nameInput.value === '') returnnickName = nameInput.valuenameShowDiv.innerHTML = nickNamenameShowDiv.parentElement.parentElement.classList.remove('hide')nameInput.parentElement.classList.add('hide')}editNameBtn.onclick = function () {nameInput.value = nickNamenameInput.parentElement.classList.remove('hide')nameShowDiv.parentElement.parentElement.classList.add('hide')}linkBtn.onclick = function () {linkWs()linkBtn.classList.add('hide')editNameBtn.classList.add('hide')outBtn.classList.remove('hide')chatBox.classList.remove('hide')}outBtn.onclick = function () {outBtn.classList.add('hide')chatBox.classList.add('hide')linkBtn.classList.remove('hide')editNameBtn.classList.remove('hide')sendMsg({type: 'close',data: nickName})ws.close()}sendBtn.onclick = function () {let content = sendContentDom.valueif (!content || content === '' || !ws) returnsendMsg({type: 'info',data: {date: Date.now(),content: content,author: nickName}})}/***  連接websocket服務器* */function linkWs() {ws = new WebSocket(`ws://localhost:8080?username=${nickName}`)ws.addEventListener("open", (e) => {})ws.addEventListener("message", function (e) {let msg = JSON.parse(e.data)//  處理消息handleMessage(msg)})ws.addEventListener("close", function (e) {console.log('關閉連接后');outBtn.classList.add('hide')chatBox.classList.add('hide')linkBtn.classList.remove('hide')editNameBtn.classList.remove('hide')//  隱藏聊天框alert('聊天室斷開連接')})}function handleMessage(msg) {switch (msg.type) {case 'user'://  用戶列表填充數據let domStr = ''msg.data.forEach(item => {console.log(item, 'i');domStr += `<div> ${item} </div>`})userDom.innerHTML = domStrbreak;case 'tips'://  提示信息msgDom.innerHTML += `<div class="tips-box">${msg.data} </div>`break;case 'info'://  信息列表const { content, author, date } = msg.datamsgDom.innerHTML += `<div class="${author === nickName ? 'msg-box-right' : 'msg-box'}"><div class="msg-box-top">${author} <span>${transTime(date)}</span></div><div class="msg-box-content"> ${content}</div></div>`break;case 'close'://  關閉連接if (msg.data) {sendMsg({type: 'close',data: nickName})ws.close()}break;case 'error'://  關閉連接if (msg.data) {alert(msg.data)ws.close()}break;case 'success'://  關閉連接if (msg.data) {alert(msg.data)sendMsg({type: 'name',data: nickName})}break;default:break;}}function sendMsg(msg) {if (!ws) {console.error('沒有連接');return}ws.send(JSON.stringify(msg))}window.addEventListener("beforeunload", (e) => {if (ws) {sendMsg({type: 'close',data: nickName})ws.close()}})function transTime(time) {let date = new Date(time)let year = date.getFullYear()let month = date.getMonth() + 1let day = date.getDate()let hour = date.getHours()let minute = date.getMinutes()let second = date.getSeconds()return `${year}/${month}/${day} ${hour}:${minute}:${second}`}</script>
</body></html>