亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

websocket學(xué)習(xí)和群聊實(shí)現(xiàn)

fantix / 925人閱讀

摘要：協(xié)議可以實(shí)現(xiàn)前后端全雙工通信，從而取代浪費(fèi)資源的長(zhǎng)輪詢。而就可以使得前后端進(jìn)行全雙工通信兩方都可以向?qū)Ψ竭M(jìn)行數(shù)據(jù)推送，是真正的平等對(duì)話。

WebSocket協(xié)議可以實(shí)現(xiàn)前后端全雙工通信，從而取代浪費(fèi)資源的長(zhǎng)輪詢。在此協(xié)議的基礎(chǔ)上，可以實(shí)現(xiàn)前后端數(shù)據(jù)、多端數(shù)據(jù)，真正的實(shí)時(shí)響應(yīng)。在學(xué)習(xí)WebSocket的過程中，實(shí)現(xiàn)了一個(gè)簡(jiǎn)化版群聊，過程和代碼詳細(xì)記錄在這篇文章中。

本篇文章來自董沅鑫的個(gè)人網(wǎng)站，引用、轉(zhuǎn)載請(qǐng)指明出處。

查看更多知識(shí)，或者技術(shù)交流：請(qǐng)?jiān)L問godbmw.com

1 概述 1.1 WebSocket 是什么？

建立在 TCP 協(xié)議之上的網(wǎng)絡(luò)通信協(xié)議

全雙工通信協(xié)議

沒有同源限制

可以發(fā)送文本、二進(jìn)制數(shù)據(jù)等

1.2 為什么需要 WebSocket？

了解計(jì)算機(jī)網(wǎng)絡(luò)協(xié)議的人，應(yīng)該都知道：HTTP 協(xié)議是一種無狀態(tài)的、無連接的、單向的應(yīng)用層協(xié)議。它采用了請(qǐng)求/響應(yīng)模型。通信請(qǐng)求只能由客戶端發(fā)起，服務(wù)端對(duì)請(qǐng)求做出應(yīng)答處理。

這種通信模型有一個(gè)弊端：HTTP 協(xié)議無法實(shí)現(xiàn)服務(wù)器主動(dòng)向客戶端發(fā)起消息。

因此，如果在客戶端想實(shí)時(shí)監(jiān)聽服務(wù)器變化，必須使用 ajax 來進(jìn)行輪詢，效率低，浪費(fèi)資源。

而 websocket 就可以使得前后端進(jìn)行全雙工通信（兩方都可以向?qū)Ψ竭M(jìn)行數(shù)據(jù)推送），是真正的平等對(duì)話。

2 WebSocket 客戶端

支持HTML5的瀏覽器支持 WebSocket 協(xié)議：

var ws = new WebSocket(url); // 創(chuàng)建一個(gè)websocket對(duì)象
2.1 WebSocket 屬性
屬性 描述
ws.readyState 只讀屬性 readyState 表示連接狀態(tài)，可以是以下值：0 - 表示連接尚未建立。1 - 表示連接已建立，可以進(jìn)行通信。2 - 表示連接正在進(jìn)行關(guān)閉。3 - 表示連接已經(jīng)關(guān)閉或者連接不能打開。
ws.bufferedAmount 只讀屬性 bufferedAmount 已被 send() 放入正在隊(duì)列中等待傳輸，但是還沒有發(fā)出的 UTF-8 文本字節(jié)數(shù)。
2.2 WebSocket 方法
屬性 描述
ws.send() 數(shù)據(jù)發(fā)送
ws.close() 關(guān)閉連接
2.3 Websocket 事件
屬性 描述
open 連接建立觸發(fā)
message 通信時(shí)觸發(fā)
error 出錯(cuò)觸發(fā)
close 關(guān)閉連接觸發(fā)
2.4 代碼實(shí)現(xiàn)

假設(shè)我們?cè)诒镜?b>8080端口打開了websocket服務(wù)，那么，下面代碼可以在瀏覽器中實(shí)現(xiàn)和這個(gè)服務(wù)的通信：
3 WebSocket 服務(wù)端 
關(guān)于服務(wù)端實(shí)現(xiàn)，根據(jù)技術(shù)選型不同，可以選用不同的庫和包。我這里使用的是node的ws庫來websocket服務(wù)端。

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

綜上所述，ws庫有以下優(yōu)點(diǎn)：

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

長(zhǎng)期維護(hù)，效果穩(wěn)定

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

4 實(shí)現(xiàn)群聊 4.1 群聊 服務(wù)端實(shí)現(xiàn)

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

現(xiàn)在，利用ws來實(shí)現(xiàn)一個(gè)監(jiān)聽8080端口的websocket服務(wù)器，講解都在代碼注釋里，一目了然：

const PORT = 8080; // 監(jiān)聽端口
const WebSocket = require("ws"); // 引入 ws 庫

const wss = new WebSocket.Server({ port: PORT }); // 聲明wss對(duì)象

/**
 * 向除了本身之外所有客戶端發(fā)送消息，實(shí)現(xiàn)群聊功能
 * @param {*} data 要發(fā)送的數(shù)據(jù)
 * @param {*} ws 客戶端連接對(duì)象
 */
wss.broadcastToElse = function broadcast(data, ws) { 
  wss.clients.forEach(function each(client) {
    if (client !== ws && client.readyState === WebSocket.OPEN) {
      client.send(data);
    }
  });
};

/* 客戶端接入，觸發(fā) connection */
wss.on("connection", function connection(ws, req) {
  let ip = req.connection.remoteAddress; // 通過req對(duì)象可以獲得客戶端信息，比如：ip，headers等

  /* 客戶端發(fā)送消息，觸發(fā) message */
  ws.on("message", function incoming(message) { 
    ws.send(message); // 向客戶端發(fā)送消息
    wss.broadcastToElse(message, ws); // 向 其他的 客戶端發(fā)送消息，實(shí)現(xiàn)群聊效果
  });

});
4.2 群聊 客戶端實(shí)現(xiàn)

為了方便編寫，這里引入了jquery和bootstrap這兩個(gè)庫，只需要關(guān)注js代碼即可。




  
  
  
  群聊
4.3 群聊 效果展示

首先啟動(dòng)我們的服務(wù)端代碼：node server.js 。其中，server.js是放置服務(wù)端代碼的文件。

然后，我們打開2次編寫的html代碼，這相當(dāng)于，打開2個(gè)客戶端。來檢測(cè)群聊功能。

5. 相關(guān)資料

概念解釋：

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

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

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

本篇文章來自董沅鑫的個(gè)人網(wǎng)站，引用、轉(zhuǎn)載請(qǐng)指明出處。

查看更多知識(shí)，或者技術(shù)交流：請(qǐng)?jiān)L問godbmw.com

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/108362.html

相關(guān)文章

  • Swoole WebSocket 的應(yīng)用

    摘要：概述這是關(guān)于學(xué)習(xí)的第三篇文章的應(yīng)用。第二篇的應(yīng)用第一篇的應(yīng)用什么是是一種在單個(gè)連接上進(jìn)行全雙工通信的協(xié)議。如果想了解的知識(shí)，請(qǐng)看第二篇的應(yīng)用。溫馨提示本僅僅是簡(jiǎn)單的實(shí)現(xiàn)，如需應(yīng)用到真實(shí)場(chǎng)景中還要多做優(yōu)化。 概述 這是關(guān)于 Swoole 學(xué)習(xí)的第三篇文章：Swoole WebSocket 的應(yīng)用。 第二篇：Swoole Task 的應(yīng)用 第一篇：Swoole Timer 的應(yīng)用 什么...

    Wildcard 評(píng)論0 收藏0

  • netty搭建web聊天室（2）群聊

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

    microelec 評(píng)論0 收藏0

  • React系列——websocket群聊系統(tǒng)在react的實(shí)現(xiàn)

    摘要：前奏這篇文章僅對(duì)不熟悉在中使用的人以及入門者有幫助。基本介紹想要實(shí)現(xiàn)一種實(shí)時(shí)的雙向通信聊天系統(tǒng)，你可能會(huì)想到輪詢長(zhǎng)或短，但你最想要的還是的實(shí)現(xiàn)。客戶端的實(shí)現(xiàn)端的實(shí)現(xiàn)，才是我們應(yīng)該關(guān)注的重點(diǎn)。 前奏 這篇文章僅對(duì)不熟悉在react中使用socket.io的人、以及websocket入門者有幫助。 下面這個(gè)動(dòng)態(tài)圖展示的聊天系統(tǒng)是用react+express+websocket搭建的，很模糊...

    Acceml 評(píng)論0 收藏0

  • InChat一版，僅僅兩個(gè)接口實(shí)現(xiàn)自己的IM系統(tǒng)（可兼容）

    摘要：大家明天一起去唱吧關(guān)于數(shù)據(jù)庫設(shè)計(jì)當(dāng)前一版不會(huì)固定大家的數(shù)據(jù)庫設(shè)計(jì)，大家可以自己自由設(shè)計(jì)，同時(shí)搭上自己的項(xiàng)目，構(gòu)建一個(gè)附帶的自項(xiàng)目。 InChat 一個(gè)IM通訊框架 一個(gè)輕量級(jí)、高效率的支持多端（應(yīng)用與硬件Iot）的異步網(wǎng)絡(luò)應(yīng)用通訊框架。（核心底層Netty） Github：InChat 版本目標(biāo)：完成基本的消息通訊（僅支持文本消息），離線消息存儲(chǔ)，歷史消息查詢，一對(duì)一聊天、自我聊天、群...

    CrazyCodes 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

fantix

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<