一、什麼是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.io
2，創建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>人)-<span
id="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>
<input
type="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");
//隨機分配id
var 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 即可下載。其他編輯器請百度查找。同時打開多個客戶端就可以實現模擬多人聊天，由於沒有真正的數據庫，所使用的都是假數據，一刷新就會變。
效果圖
下載源代碼請點擊此處