websocket學習和群聊實現

fantix 發布于2019-08-26 12:16 / 832人閱讀

摘要：協議可以實現前后端全雙工通信，從而取代浪費資源的長輪詢。而就可以使得前后端進行全雙工通信兩方都可以向對方進行數據推送，是真正的平等對話。

WebSocket協議可以實現前后端全雙工通信，從而取代浪費資源的長輪詢。在此協議的基礎上，可以實現前后端數據、多端數據，真正的實時響應。在學習WebSocket的過程中，實現了一個簡化版群聊，過程和代碼詳細記錄在這篇文章中。

本篇文章來自董沅鑫的個人網站，引用、轉載請指明出處。

查看更多知識，或者技術交流：請訪問godbmw.com

1 概述 1.1 WebSocket 是什么？

建立在 TCP 協議之上的網絡通信協議

全雙工通信協議

沒有同源限制

可以發送文本、二進制數據等

1.2 為什么需要 WebSocket？

了解計算機網絡協議的人，應該都知道：HTTP 協議是一種無狀態的、無連接的、單向的應用層協議。它采用了請求/響應模型。通信請求只能由客戶端發起，服務端對請求做出應答處理。

這種通信模型有一個弊端：HTTP 協議無法實現服務器主動向客戶端發起消息。

因此，如果在客戶端想實時監聽服務器變化，必須使用 ajax 來進行輪詢，效率低，浪費資源。

而 websocket 就可以使得前后端進行全雙工通信（兩方都可以向對方進行數據推送），是真正的平等對話。

2 WebSocket 客戶端

支持HTML5的瀏覽器支持 WebSocket 協議：

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服務，那么，下面代碼可以在瀏覽器中實現和這個服務的通信：

3 WebSocket 服務端

關于服務端實現，根據技術選型不同，可以選用不同的庫和包。我這里使用的是node的ws庫來websocket服務端。

在阮一峰的博文提到的socket.io庫，在瀏覽器端的寫法不兼容原生API，準確來說，它們自己實現了一套websocket。所以，使用的時候前后端都應該引用第三方庫。這樣就造成了代碼遷移性，嚴重下降。

綜上所述，ws庫有以下優點：

兼容性好，兼容瀏覽器原生API

長期維護，效果穩定

使用方便（往下看就知道了）

4 實現群聊 4.1 群聊服務端實現

首先，在命令行中，安裝ws庫: npm install ws --save

現在，利用ws來實現一個監聽8080端口的websocket服務器，講解都在代碼注釋里，一目了然：

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代碼即可。

4.3 群聊效果展示

首先啟動我們的服務端代碼：node server.js 。其中，server.js是放置服務端代碼的文件。

然后，我們打開2次編寫的html代碼，這相當于，打開2個客戶端。來檢測群聊功能。

5. 相關資料

概念解釋：

http://www.ruanyifeng.com/blo...

https://www.cnblogs.com/jingm...

ws文檔：https://www.npmjs.com/package/ws

本篇文章來自董沅鑫的個人網站，引用、轉載請指明出處。

查看更多知識，或者技術交流：請訪問godbmw.com

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108362.html

Swoole WebSocket 的應用

摘要：概述這是關于學習的第三篇文章的應用。第二篇的應用第一篇的應用什么是是一種在單個連接上進行全雙工通信的協議。如果想了解的知識，請看第二篇的應用。溫馨提示本僅僅是簡單的實現，如需應用到真實場景中還要多做優化。概述這是關于 Swoole 學習的第三篇文章：Swoole WebSocket 的應用。第二篇：Swoole Task 的應用第一篇：Swoole Timer 的應用什么...

Wildcard 2019-07-01 12:46 評論0 收藏0
netty搭建web聊天室（2）群聊

摘要：上節課完成了的后端搭建，搞定了簡單的請求響應，今天來結合前端來完成群聊功能。其實后端群聊很簡單，就是把一個用戶的輸入消息，返回給所有在線客戶端，前端去負責篩選顯示。上節課完成了netty的后端搭建，搞定了簡單的http請求響應，今天來結合前端websocket來完成群聊功能。話不多說先上圖：showImg(https://segmentfault.com/img/bVbnCa8?w=...

microelec 2019-08-16 14:42 評論0 收藏0
React系列——websocket群聊系統在react的實現

摘要：前奏這篇文章僅對不熟悉在中使用的人以及入門者有幫助。基本介紹想要實現一種實時的雙向通信聊天系統，你可能會想到輪詢長或短，但你最想要的還是的實現。客戶端的實現端的實現，才是我們應該關注的重點。前奏這篇文章僅對不熟悉在react中使用socket.io的人、以及websocket入門者有幫助。下面這個動態圖展示的聊天系統是用react+express+websocket搭建的，很模糊...

Acceml 2019-08-22 11:17 評論0 收藏0
InChat一版，僅僅兩個接口實現自己的IM系統（可兼容）

摘要：大家明天一起去唱吧關于數據庫設計當前一版不會固定大家的數據庫設計，大家可以自己自由設計，同時搭上自己的項目，構建一個附帶的自項目。 InChat 一個IM通訊框架一個輕量級、高效率的支持多端（應用與硬件Iot）的異步網絡應用通訊框架。（核心底層Netty） Github：InChat 版本目標：完成基本的消息通訊（僅支持文本消息），離線消息存儲，歷史消息查詢，一對一聊天、自我聊天、群...

CrazyCodes 2019-08-16 13:59 評論0 收藏0