websocket实现聊天室（一）
????????最近接到一個聊天室的任務，之前在學校完全沒有接觸過這方面的需求，在網上查找資料后，基本確定了實現方案，現在就開始著手學習，在此記錄一下遇到的問題。
初識websocket
??????? 在簡單了解websocket后，我覺得與http請求類似，不過websocket可以實現在客服端向服務器發一次請求之后，就會建立一個不會中斷的通訊，這樣實現聊天室就不需要像http請求那樣，你需要隔一段時間就向服務器發一次請求，詢問是否有發給我的消息。
H5中使用websocket
??????? H5中提供了websocket的API，我們可以直接使用。
主要就是四部曲:
1、創建websocket（這里有一個問題，我參考資料中websocket服務地址使用的是ws://echo.websocket.org，但我使用的時候報了個錯，貌似是被攔截器攔截了，沒有找到解決辦法，所以直接使用的自己本地創建的websocket的服務地址，本篇后面也會介紹如何創建一個簡單的本地的websocket服務）
// 1、創建websocket// 參數：websocket的服務地址var socket = new WebSocket("ws://localhost:3000");2、注冊一個open事件，在連接創建時觸發的事件
// 2、open：當和websocket的服務器連接成功時觸發socket.addEventListener("open", () => {// 將服務器連接成功的信息打印到div中div.innerHTML = "服務器連接成功了！";});3、注冊一個send事件，發送數據給服務器
// 3、 send：發送數據給服務器button.addEventListener("click", () => {// 獲取輸入框中的數據var value = input.value;// 調用send方法將數據發送給服務器socket.send(value);});4、注冊一個message事件，接收服務器數據
// 4、message：接收服務器數據socket.addEventListener("message", (e) => {// 將接收到的數據顯示出來div.innerHTML = e.data;});????????這樣客戶端（瀏覽器）簡單的流程就走完了，接下來就是搭建一個本地的websocket服務。
搭建一個本地的websocket服務
?????????這里我是用的方式是用nodejs-websocket進行搭建，使用說明文檔地址：?ddwsnodejs-websocket - npm
按照官方的教程進行搭建就可以。
1、首先我們需要安裝nodejs-websocket的依賴
npm install nodejs-websocket2、創建一個server.js,引入nodejs-websocket包
// 1、 導入nodejs-websocket包 const ws = require("nodejs-WebSocket");3、創建一個server
// 創建一個server const server = ws.createServer((conn) => {console.log("有用戶連接上來了！");// 接收到客戶端發送的數據時觸發conn.on("text", (data) => {broadcast(data);});// 連接斷開時觸發conn.on("close", (data) => {broadcast(data);});// 異常時觸發conn.on("error", (data) => {console.log("發生異常！");});}).listen(PORT, () => {console.log("websocket服務器動起來了！監聽了端口：" + PORT);});????????這里有一個需要注意的地方，注冊close事件時，也需要將error事件注冊，因為發生close事件時，會發生異常，若沒有注冊error事件，服務器就會停止運行。
4、將接收到的數據發送給所有人（廣播）
// 廣播方法 function broadcast(msg) {server.connections.forEach((item) => {item.send(JSON.stringify(msg));}); }?這樣一個簡單的websocket服務器就搭建完成了。
下面把兩個完整的代碼貼出來
index.html
<!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>div {width: 200px;height: 400px;border: 1px solid;}</style></head><body><!-- 顯示內容 --><div></div><!-- 輸入內容 --><input type="text" placeholder="請輸入要發送的內容" /><!-- 發送按鈕 --><button>發送</button><script>var input = document.querySelector("input");var button = document.querySelector("button");var div = document.querySelector("div");// 1、創建websocket// 參數：websocket的服務地址var socket = new WebSocket("ws://localhost:3000");// 2、open：當和websocket的服務器連接成功時觸發socket.addEventListener("open", () => {div.innerHTML = "服務器連接成功了！";});// 3、 send：發送數據給服務器button.addEventListener("click", () => {var value = input.value;socket.send(value);console.log(value);});// 4、message：接收服務器數據socket.addEventListener("message", (e) => {div.innerHTML = JSON.parse(e.data);});</script></body> </html>server.js
?
// 1、 導入nodejs-websocket包 const ws = require("nodejs-WebSocket"); const PORT = 3000;let count = 0; // 創建一個server const server = ws.createServer((conn) => {console.log("有用戶連接上來了！");count++;conn.userName = "用戶" + count;broadcast(conn.userName + "進入了聊天室");// 接收到客戶端發送的數據時觸發conn.on("text", (data) => {broadcast(data);});// 連接斷開時觸發conn.on("close", (data) => {count--;broadcast(data);});// 異常時觸發conn.on("error", (data) => {console.log("發生異常！");});}).listen(PORT, () => {console.log("websocket服務器動起來了！監聽了端口：" + PORT);});// 廣播方法 function broadcast(msg) {server.connections.forEach((item) => {item.send(JSON.stringify(msg));}); }運行
????????命令提示符進入到server.js的目錄下，node .\server.js，然后打開index.html即可
?????????這篇只是完成了一個最簡單的聊天室功能，聊天歷史記錄、區分消息類型、定位到最新一條消息、發送圖片表情等都沒有實現，接下來就是按著微信聊天對功能進行優化。
總結
以上是生活随笔為你收集整理的websocket实现聊天室（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql+美团点评_美团点评Mysql
- 下一篇： 用java实现一个简单的网络聊天室