文章目錄

• • websocket學習筆記
  • • 實現的方式

websocket學習筆記

WebSocket 是一種網絡通信協議。RFC6455 定義了它的通信標準。

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。

為什么需要 WebSocket ？
初次接觸 WebSocket 的人，都會問同樣的問題：我們已經有了 HTTP 協議，為什么還需要另一個協議？它能帶來什么好處？
答案很簡單，因為 HTTP 協議有一個缺陷：通信只能由客戶端發起。
舉例來說，我們想了解今天的天氣，只能是客戶端向服務器發出請求，服務器返回查詢結果。HTTP 協議做不到服務器主動向客戶端推送信息。

這種單向請求的特點，注定了如果服務器有連續的狀態變化，客戶端要獲知就非常麻煩。我們只能使用"輪詢"：每隔一段時候，就發出一個詢問，了解服務器有沒有新的信息。最典型的場景就是聊天室。
輪詢的效率低，非常浪費資源（因為必須不停連接，或者 HTTP 連接始終打開）。因此，工程師們一直在思考，有沒有更好的方法。WebSocket 就是這樣發明的。

隨著互聯網的發展，傳統的HTTP協議已經很難滿足Web應用日益復雜的需求了。近年來，隨著HTML5的誕生，WebSocket協議被提出，它實現了瀏覽器與服務器的全雙工通信，擴展了瀏覽器與服務端的通信功能，使服務端也能主動向客戶端發送數據。

我們知道，傳統的HTTP協議是無狀態的，每次請求（request）都要由客戶端（如 瀏覽器）主動發起，服務端進行處理后返回response結果，而服務端很難主動向客戶端發送數據；這種客戶端是主動方，服務端是被動方的傳統Web模式 對于信息變化不頻繁的Web應用來說造成的麻煩較小，而對于涉及實時信息的Web應用卻帶來了很大的不便，如帶有即時通信、實時數據、訂閱推送等功能的應用。

實現的方式

//先握手，并查看客戶端的瀏覽器是否支持websocket協議 //連接發生錯誤的回調方法 ws.onerror = function () {alert("WebSocket連接發生錯誤"); };//連接成功建立的回調方法 ws.onopen = function () {alert("WebSocket連接成功"); }//接收到消息的回調方法，websocket的controller里的onMessage方法session_to傳過來的值 ws.onmessage = function (event) {alert(event.data); }//連接關閉的回調方法 ws.onclose = function () {alert("WebSocket連接關閉"); }//監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。 window.onbeforeunload = function () {closeWebSocket(); }function closeWebSocket(){ws.close(); }

nodejs實現websocket:

let ws = require('ws'); //引入websocket模塊 let uuid = require('uuid'); //引入創建唯一id模塊 let socketServer = ws.Server; let clientIndex = 0; let wss = new socketServer({port: 8090}, ()=>{console.log("服務啟動，端口8090.") }); //創建websocketServer實例監聽8090端口let clients = []; //創建客戶端列表，用于保存客戶端及相關連接信息/*** 廣播所有客戶端消息* @param {String} type 廣播方式(admin為系統消息，user為用戶消息)* @param {String} message 消息* @param {String} nickname 用戶昵稱，廣播方式為admin時可以不存在*/ function broadcastSend(type, message, nickname) {console.log("type:"+type)clients.forEach(function(v, i) {if(v.ws.readyState === ws.OPEN) {v.ws.send(JSON.stringify({"type": type,"nickname": nickname,"message": message}));}}) }//定時發送圖表數據 function echartData() {function sortNumber(a,b){return a-b;//升序}//測試數據var iArray = [];function getRamdon(start, end) {var temp = end - start + 1; //91return Math.abs(Math.floor(Math.random()*temp)) + start; //從start開始}for(var i=0; i < 10; i++) {iArray.push(getRamdon(100,1000)) //循環10次，添加10個數在數組里}iArray.sort(sortNumber);return iArray; }var inter = null; function echartSend() {//第一次，以后每5秒更新一次var arr = echartData();broadcastSend("echart", arr, "system");if (inter) clearInterval(inter);inter = setInterval(function() {var arr = echartData();broadcastSend("echart", arr, "system");}, 5000) }//監聽連接 wss.on('connection', function(ws) {let client_uuid = uuid.v4();let nickname = `AnonymousUser${clientIndex++}`;clients.push({"id": client_uuid,"ws": ws,"nickname": nickname});//發送圖表數據echartSend();console.log(`client ${client_uuid} connected`);/*** 關閉服務，從客戶端監聽列表刪除*/function closeSocket() {for(let i = 0; i < clients.length; i++) {if(clients[i].id == client_uuid) {let disconnect_message = `${nickname} has disconnected`;broadcastSend("notification", disconnect_message, nickname);clients.splice(i, 1);}}//無客戶端時停止定時器if (clients.length == 0){console.log("無客戶端連接，清除定時器。")if (inter) clearInterval(inter);}}/*監聽消息*/ws.on('message', function(message) {if(message.indexOf('/nick') === 0) {let nickname_array = message.split('_');if(nickname_array.length >= 2) {let old_nickname = nickname;nickname = nickname_array[1];let nickname_message = `Client ${old_nickname} change to ${nickname}`;broadcastSend("nick_update", nickname_message, nickname);}} else {broadcastSend("message", message, nickname);}});/*監聽斷開連接*/ws.on('close', function() {closeSocket();}) })

【其他代碼可參考】https://gitee.com/monkeyhlj/vue-learning/tree/master/20210809-WebSocket%E5%AD%A6%E4%B9%A0
【Java實現可參考】Java實現websocket

總結

以上是生活随笔為你收集整理的websocket学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。