websocket學習和群聊實現

来源:https://www.cnblogs.com/geyouneihan/archive/2018/08/19/9502280.html
-Advertisement-
Play Games

協議可以實現前後端全雙工通信,從而取代浪費資源的長輪詢。在此協議的基礎上,可以實現前後端數據、多端數據,真正的 實時響應 。在學習 的過程中,實現了一個簡化版群聊,過程和代碼詳細記錄在這篇文章中。 本篇文章來自 "董沅鑫的個人網站" ,引用、轉載請指明出處 。 查看更多知識,或者技術交流:請訪問 " ...


> `WebSocket`協議可以實現前後端全雙工通信,從而取代浪費資源的長輪詢。在此協議的基礎上,可以實現前後端數據、多端數據,真正的**實時響應**。在學習`WebSocket`的過程中,實現了一個簡化版群聊,過程和代碼詳細記錄在這篇文章中。 **本篇文章來自[董沅鑫的個人網站](https://godbmw.com/passage/38),引用、轉載請指明出處**。 **查看更多知識,或者技術交流:請訪問[`godbmw.com`](https://godbmw.com/)** ## 1 概述 ### 1.1 WebSocket 是什麼? 1. 建立在 TCP 協議之上的網路通信協議 2. 全雙工通信協議 3. 沒有同源限制 4. 可以發送文本、二進位數據等 ### 1.2 為什麼需要 WebSocket? 瞭解電腦網路協議的人,應該都知道:HTTP 協議是一種無狀態的、無連接的、單向的應用層協議。它採用了請求/響應模型。通信請求只能由客戶端發起,服務端對請求做出應答處理。 這種通信模型有一個弊端:HTTP 協議無法實現伺服器主動向客戶端發起消息。 因此,如果在客戶端想實時監聽伺服器變化,必須使用 ajax 來進行輪詢,效率低,浪費資源。 而 websocket 就可以使得**前後端進行全雙工通信(兩方都可以向對方進行數據推送),是真正的平等對話**。 ## 2 WebSocket 客戶端 支持`HTML5`的瀏覽器支持 WebSocket 協議: ```javascript var ws = new WebSocket(url); // 創建一個websocket對象 ``` ### 2.1 WebSocket 屬性 | 屬性 | 描述 | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ws.readyState | 只讀屬性 readyState 表示連接狀態,可以是以下值:0 - 表示連接尚未建立。1 - 表示連接已建立,可以進行通信。2 - 表示連接正在進行關閉。3 - 表示連接已經關閉或者連接不能打開。 | | ws.bufferedAmount | 只讀屬性 bufferedAmount 已被 send() 放入正在隊列中等待傳輸,但是還沒有發出的 UTF-8 文本位元組數。 | ### 2.2 WebSocket 方法 | 屬性 | 描述 | | ---------- | -------- | | ws.send() | 數據發送 | | ws.close() | 關閉連接 | ### 2.3 Websocket 事件 | 屬性 | 描述 | | ------- | ------------ | | open | 連接建立觸發 | | message | 通信時觸發 | | error | 出錯觸發 | | close | 關閉連接觸發 | ### 2.4 代碼實現 假設我們在本地`8080`埠打開了websocket服務,那麼,下麵代碼可以在瀏覽器中實現和這個服務的通信: ```html ``` ## 3 WebSocket 服務端 > 關於服務端實現,根據技術選型不同,可以選用不同的庫和包。我這裡使用的是`node`的`ws`庫來websocket服務端。 在[阮一峰的博文](http://www.ruanyifeng.com/blog/2017/05/websocket.html)提到的`socket.io`庫,在瀏覽器端的寫法不相容原生API,準確來說,它們自己實現了一套websocket。所以,使用的時候前後端都應該引用第三方庫。**這樣就造成了代碼遷移性,嚴重下降。** 綜上所述,`ws`庫有以下優點: 1. 相容性好,相容瀏覽器原生API 2. 長期維護,效果穩定 3. 使用方便(往下看就知道了) ## 4 實現群聊 ### 4.1 群聊 服務端實現 首先,在命令行中,安裝`ws`庫: `npm install ws --save` 現在,利用`ws`來實現一個監聽`8080`埠的websocket伺服器,**講解都在代碼註釋里,一目瞭然**: ```javascript const PORT = 8080; // 監聽埠 const WebSocket = require("ws"); // 引入 ws 庫 const wss = new WebSocket.Server({ port: PORT }); // 聲明wss對象 /** * 向除了本身之外所有客戶端發送消息,實現群聊功能 * @param {*} data 要發送的數據 * @param {*} ws 客戶端連接對象 */ wss.broadcastToElse = function broadcast(data, ws) { wss.clients.forEach(function each(client) { if (client !== ws && client.readyState === WebSocket.OPEN) { client.send(data); } }); }; /* 客戶端接入,觸發 connection */ wss.on("connection", function connection(ws, req) { let ip = req.connection.remoteAddress; // 通過req對象可以獲得客戶端信息,比如:ip,headers等 /* 客戶端發送消息,觸發 message */ ws.on("message", function incoming(message) { ws.send(message); // 向客戶端發送消息 wss.broadcastToElse(message, ws); // 向 其他的 客戶端發送消息,實現群聊效果 }); }); ``` ### 4.2 群聊 客戶端實現 為了方便編寫,這裡引入了`jquery`和`bootstrap`這兩個庫,只需要關註js代碼即可。 ```html 群聊 ``` ### 4.3 群聊 效果展示 首先啟動我們的服務端代碼:`node server.js` 。其中,`server.js`是放置服務端代碼的文件。 然後,我們打開2次編寫的`html`代碼,這相當於,打開2個客戶端。來檢測群聊功能。 ![效果圖](https://raw.githubusercontent.com/dongyuanxin/markdown-static/master/JavaScript/websocket學習和群聊實現/1.png) ## 5. 相關資料 - 概念解釋: - http://www.ruanyifeng.com/blog/2017/05/websocket.html - https://www.cnblogs.com/jingmoxukong/p/7755643.html - `ws`文檔:https://www.npmjs.com/package/ws **本篇文章來自[董沅鑫的個人網站](https://godbmw.com/passage/38),引用、轉載請指明出處**。 **查看更多知識,或者技術交流:請訪問[`godbmw`](https://godbmw.com/)**
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 天記錄一個js庫:pdf.js。主要是實現線上打開pdf功能。因為項目需求需要能線上查看pdf文檔,所以就研究了一下這個控制項。 有些人很好奇,線上打開pdf文檔瀏覽器不是支持嗎。是的你說的都是現代瀏覽器,例如谷歌,360,edg等。 但是很不幸的是我們這個項目是要使用我們最喜歡(很煩)的瀏覽器IE。 ...
  • 聲明 這並不是掘金官方小程式(貌似沒有搜到掘金 對應的官方小程式),完全為第三者開發者開發,僅用於學習交流,禁止用於其他用途。若要使用官方正版,可訪問掘金 "官方網站" ,或下載掘金官方 APP,或訪問掘金官方其他途徑。 該小程式所有 均來自掘金官方 網站和官方 版 (以 為主), 是~~照抄~~參 ...
  • npm run build報錯 原理 按照他人的說法是,伺服器記憶體不夠用了,這樣就給他配置一個單獨的記憶體出來就解決了 解決方法 sudo /bin/dd if=/dev/zero of=/var/swap.1 bs=1M count=1024 sudo /sbin/mkswap /var/swap. ...
  • html中的定位體系 一、 分類 1、常規流static 2、浮動float 3、相對定位relative 4、絕對定位absolute 5、固定定位fixed 二、使用時的區分 在網頁佈局中,常常都會使用到這5中定位方式 ,總體分為三大類:靜態static、浮動float、絕對定位(relativ... ...
  • var i = 2, x = 5;var fn = function (x) { x += 3; return function (y) { console.log((x++) + y + (--i)); }};var f = fn(1);f(2);fn(3)(4);f(5); 答案:f(2) => ...
  • HTTP協議的發展歷史 HTTP/0.9 0.9版本是第一個定稿的HTTP版本,相對較為簡陋。它有以下特點: 只有一個命令GET 沒有header等描述數據的信息 伺服器發送完畢,就關閉TCP連接 註意一點,0.9版本的HTTP協議只要伺服器發送完畢,就直接關閉TCP連接,也就是說,一次TCP連接只 ...
  • 方法一: 容器確定寬高:知識點:transform只能設置在display為block的元素上。 方法一效果圖: 方法二: ...
  • Day3 Form表單 一.form表單 :提交數據 表單在網頁中主要負責數據採集功能,它用<form>標簽定義。 用戶輸入的信息都要包含在form標簽中,點擊提交後,<form>和</form>裡面包含的數據將被提交到伺服器或者電子郵件里。 所有的用戶輸入內容的地方都用表單來寫,如登錄註冊、搜索框 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...