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