WebSocket实现广播
一、什么是WebSocket
WebSocket是HTML5一種新的協議，是一種網絡通訊協議，該協議最大的特點是：服務器主動可以向客戶端推送消息，當然客戶端也可以主動向服務器發送信息，是真正的平等雙向對話。之所以使用WebSocket的原因是：http協議只能由客戶端向服務器發送消息。
二、socket、WebSocket、socket.io三者的區別
1，socket：是傳輸控制層協議
2，WebSocket：是應用層協議
3，socket：是一個為瀏覽器與服務器之間提供實時、雙向、基于事件的通信軟件庫。
三、WebSocket的優點
1，數據格式比較輕量，通訊高效
2，沒有同源現制，客戶端可以與任何服務器通訊
3，協議標識符為ws(如果加密則為wws)
四、實現WebSocket的基本原理
五、實現廣播案例
Node.js服務器：
1，安裝socket.io
npm install --save socket.io2，創建app.js，
//創建HTTP服務器 const app = require("http").createServer(); //將HTTP服務器注入到WebSocket服務器 const IO = require("socket.io")(app); //指定HTTP的監聽端口 app.listen(5000, () => {console.log("ok"); });client客戶端：
1.引入socket.io的客戶端腳本文件
2.創建socket客戶端
var client = io(“ws://websocket服務器地址”)
說明:只要引入了socket.io的客戶端腳本文件，會自動暴露一個名稱為io的函數
使用方法建立連接
Node.js服務器
on()方法
on()方法用于實現根據指定的事件來注冊一個函數(監聽客戶端的事件，然后執行相關的操作)，其語法結構是：
client.on(“事件名稱”,([data[,…]])=>{
…
})
server.on(“connect/connection”)事件
該事件在客戶端連接到服務器時觸發，其語法結構是：
server.on(“connect/connection”,(client)=>{
//client代表是當前連接到服務器的客戶端
});
emit()方法
emit()方法用于實現服務器向客戶端廣播事件，其語法結構是：
server.emit(“事件名稱”[,數據])
Node.js服務器的代碼示例
//創建HTTP服務器 const app = require("http").createServer(); //將HTTP服務器注入到WebSocket服務器 const IO = require("socket.io")(app); //指定HTTP的監聽端口 app.listen(5000, () => {console.log("ok"); }); //該事件在客戶端連接到服務器時觸發 IO.on("connect", (client) => {//接收客戶端發送的事件和數據client.on("send message", (data) => {// 廣播出去的事件名和數據IO.emit("borst message", { message: data });}); });client客戶端：
emit()方法
emit()方法用于實現客戶端向服務器廣播事件，其語法結構是：
client.emit(“事件名稱”[,數據])
on()方法
用于實現根據指定的事件來注冊一個函數(監聽到服務器的事件，然后執行相關的操作)，其語法結構是：
client.on(“事件名稱”,([data[,…]])=>{
…
})
client客戶端的代碼示例
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>微信聊天室</title><link rel="stylesheet" href="styles/normalize.css" /><link rel="stylesheet" href="styles/reset.css" /><link rel="stylesheet" href="styles/chart.css" /><link rel="stylesheet" href="styles/char.css" /></head><body><div id="chart-container"><div class="chart-user-list" id="chart-user-list"><div class="user-item" id="user_img"><img src="images/avatar/15.jpg" alt="" />未知名</div></div><div class="chart-main-area"><div class="chart-main-title"><h1>微K聊天室(<span id="userNumber">15</span>人)-<spanid="currentUser"></span></h1></div><!-- 聊天內容列表開始 --><div class="chart-list" id="chart-list"></div><!-- 聊天內容列表結束 --><div class="chart-form"><div><textarea class="chart-form-message" id="message"></textarea></div><div><inputtype="button"id="send"class="chart-form-send"value="發表"onclick="send()"/></div></div></div></div><script src="./scripts/socket.io.js"></script><script>var client = io("ws://127.0.0.1:5000");console.log(client);//獲取聊天室var chartListr = document.getElementById("chart-list");//隨機分配idvar id = parseInt(Math.random() * 12);console.log(id);function send() {//獲取輸入框的節點,并獲取輸框的文本var messageEle = document.getElementById("message");// 將自己聊天信息展示在聊天窗口的右側var br = document.createElement("div");br.className = "chart-item";var messageVal = messageEle.value;br.innerHTML = `<div class="user-right"><img src="images/avatar/${id}.jpg" alt="" /></div><div class="user-message-right">${messageVal}</div>`;chartListr.appendChild(br);// 自定義事件：send message;// 自定義事件描述：代表客戶端向Websocket服務器發送的消息// 發送client.emit("send message", { message: messageVal, code: id });//發送完成后清除聊天輸入框messageEle.value = "";}console.log(id);// 接收服務器自動發送過來的數據 與發送過來的事件名要一值client.on("borst message", (data) => {console.log(data.message);//如何和自己的id不一致就是接收來的信息//接收來的信息放在右側，并且不顯示在發送人的聊天框里if (data.message.code != id) {var br = document.createElement("div");br.className = "chart-item";br.innerHTML = `<div class="user-face"><img src="images/avatar/${data.message.code}.jpg" alt="" /></div><div class="user-message">${data.message.message}</div>`;chartListr.appendChild(br);}});</script></body> </html>注意：
請使用Live Server插件打開客戶端，vscode在擴展中直接搜Live Server 即可下載。其他編輯器請百度查找。同時打開多個客戶端就可以實現模擬多人聊天，由于沒有真正的數據庫，所使用的都是假數據，一刷新就會變。
效果圖
下載源代碼請點擊此處
總結
以上是生活随笔為你收集整理的WebSocket实现广播的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Junit的基本使用（详解）
- 下一篇： 中国联通云管理研究组组长徐雷：运营商SD