WebSocket以及socketIO的使用

来源:https://www.cnblogs.com/deus/archive/2020/02/24/12355605.html
-Advertisement-
Play Games

簡介 WebSocket 使得客戶端和伺服器之間的數據交換變得更加簡單， 允許服務端主動向客戶端推送數據。 在 WebSocket API 中，瀏覽器和伺服器只需要完成一次握手，兩者之間就直接 可以創建持久性的連接，併進行雙向數據傳輸。 現在，很多網站為了實現 推送技術 ，所用的技術都是 Ajax ...


簡介

WebSocket 使得客戶端和伺服器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和伺服器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，併進行雙向數據傳輸。

現在，很多網站為了實現推送技術，所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對伺服器發出HTTP請求，然後由伺服器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷的向伺服器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。

HTML5 定義的 WebSocket 協議，能更好的節省伺服器資源和帶寬，並且能夠更實時地進行通訊。

websocket輪詢與ajax輪詢

原生socket

socket是在http基礎上，對http進行升級，讓連接用socket來完成。

一個典型的Websocket握手請求如下：

客戶端請求

GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: example.com
Origin: http://example.com
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13

伺服器回應

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=
Sec-WebSocket-Location: ws://example.com/
  • Connection 必須設置 Upgrade，表示客戶端希望連接升級。
  • Upgrade 欄位必須設置 Websocket，表示希望升級到 Websocket 協議。
  • Sec-WebSocket-Key 是隨機的字元串，伺服器端會用這些數據來構造出一個 SHA-1 的信息摘要。把 “Sec-WebSocket-Key” 加上一個特殊字元串 “258EAFA5-E914-47DA-95CA-C5AB0DC85B11”，然後計算 SHA-1 摘要，之後進行 BASE-64 編碼，將結果做為 “Sec-WebSocket-Accept” 頭的值，返回給客戶端。如此操作，可以儘量避免普通 HTTP 請求被誤認為 Websocket 協議。
  • Sec-WebSocket-Version 表示支持的 Websocket 版本。RFC6455 要求使用的版本是 13，之前草案的版本均應當棄用。
  • Origin 欄位是可選的，通常用來表示在瀏覽器中發起此 Websocket 連接所在的頁面，類似於 Referer。但是，與 Referer 不同的是，Origin 只包含了協議和主機名稱。
  • 其他一些定義在 HTTP 協議中的欄位，如 Cookie 等，也可以在 Websocket 中使用。

服務端

const http = require('http');
const net = require('net');//TCP 原生socket
const crypto = require('crypto');

let server = net.createServer(socket => {

    //握手只有一次
    socket.once('data',(data)=>{
        console.log('握手開始')
        let str = data.toString()
        let lines = str.split('\r\n')

        //捨棄第一行和最後兩行
        lines = lines.slice(1,lines.length-2)

        //切開
        let headers ={}
        lines.forEach(line=>{
           let [key,value]= line.split(`: `)

            headers[key.toLowerCase()]=value

        })

        if(headers[`upgrade`]!='websocket'){
            console.log('其他協議',headers[`upgrade`])
            socket.end()
        }else if(headers[`sec-websocket-version`] != '13'){
            console.log('版本不對',headers[`upgrade`])
            socket.end()
        }else {
            let key  = headers['sec-websocket-key']
            let mask = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'

            let hash =crypto.createHash('sha1')
            hash.update(key+mask)
            let key2 =hash.digest('base64')

            socket.write(`HTTP/1.1 101 Switching Protocols\r\nUpgrade: websocket\r\nConnection: Upgrade\r\nSec-WebSocket-Accept: ${key2}\r\n\r\n`)
            //伺服器響應,握手結束

            //真正的數據
            socket.on('data',data1 => {
                console.log(data1)//幀

                let FIN = data1[0]&0x001//位運算
                let opcode=data1[0]&0xF0

            })
        }
    })

    //斷開
    socket.on('end',() =>{
        console.log('客戶端斷開')
    })
});

server.listen(8080);

客戶端

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    let socket = new WebSocket('ws://localhost:8080/')

    socket.emit = function(name,...args){
        socket.send(JSON.stringify({name,data:args}))
        alert(JSON.stringify({name,data:args}))
    }
    
    socket.onopen = function (event) {
        console.log('WebSocket is open')
        socket.emit('msg',12,34)
    }
    
    socket.onmessage = function (event) {
        console.log('有消息過來')
    }
    
    socket.onclose = function () {
        console.log('斷開連接')
    }
  </script>
</head>
<body>

</body>
</html>

socket.io

原生socket較複雜，一般都通過框架來使用websocket，socket.io封裝了websocket。

socket.io文檔

安裝：

npm install socket.io -s

簡單使用

服務端

  1. 創建服務端IO對象 io = require('socket.io')(httpServer);
  2. 監視連接 io.on('connection',function(socket))
  3. 通過emit 、 on
    • on(name,function(data){}) ：綁定監聽
    • emit(name,data): 發送消息
let app = require('express')();
let httpServer = require('http').createServer(app);


//得到IO對象
let io = require('socket.io')(httpServer);
    //監視連接，（當有一個客戶連接上時回調） io關聯多個socket
    io.on('connection',function (socket) {
        console.log('socketio connected');
        
        //綁定sendMsg監聽，接受客戶端發送的消息
        socket.on('sendMsg',function (data) {
            console.log('服務端接受到瀏覽器的信息');
            
            /*io.emit 發送給所有連接伺服器的客戶端, 
            socket.emit 發送給當前連接的客戶端*/
            socket.emit('receiveMsg',data.name + '_'+ data.date);
            console.log('伺服器向瀏覽器發送消息',data)
        })
    })

http.listen(4000,function(){
    console.log('listening on:4000')
})

客戶端

  1. 引入客戶端socket.io-client 庫
  2. io(url) 連接服務端，得到socket對象（如果不指定url，將會連接預設主機地址）
  3. 通過emit，on實現通信
    <script src="https://cdn.bootcss.com/socket.io/2.3.0/socket.io.js"></script>
    <script>
     //連接伺服器,得到代表連接的socket對象
      const socket = io('ws://localhost:4000');

      //綁定'receiveMessage的監聽，來接受伺服器發送的數據
      socket.on('receiveMsg',function(data){
          console.log('瀏覽器端接受消息');
      })

      //向伺服器發送消息
      socket.emit('sendMsg',{name: 'Tom',date: Date.now()})
      console.log('瀏覽向伺服器發送消息')
    </script>

實現一個簡易的聊天室

上面服務端如果使用socket.emit 實現的是服務端和客戶端的一對一發送數據，那麼如何將服務端收到的數據發送給其他用戶，來實現聊天室效果呢？

這裡就需要io.emit 發送數據給當前連接此伺服器的所有用戶。

服務端

let app = require('express')();
let httpServer = require('http').createServer(app);


//得到IO對象
let io = require('socket.io')(httpServer);
    //監視連接.
    io.on('connection',function (socket) {
        socket.on('chat message', function(msg){
            console.log('connected',msg)
            io.emit('chat message', msg);
        });
        socket.on('disconnected',(res)=>{
            console.log('disconnected',res)
        })
    })

http.listen(4000,function(){
    console.log('listening on:4000')
})

客戶端

<head>
    <script src="https://cdn.bootcss.com/socket.io/2.3.0/socket.io.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
    $(function () {
        let socket = io("ws://localhost:4000");
        $('form').submit(function(e){
            e.preventDefault(); //阻止刷新
            socket.emit('chat message', $('#m').val());
            $('#m').val('');
            return false;
    });
    socket.on('chat message', function(msg){
      $('#messages').append($('<li>').text(msg));
    });
  });
    </script>
</head>
    <body>
        <ul id="messages"></ul>
        <form action="">
          <input id="m" autocomplete="off" /><button>Send</button>
        </form>
      </body>

接下來根據官網的方案進行優化

Here are some ideas to improve the application:

  • Broadcast a message to connected users when someone connects or disconnects.

在服務端，通過io.on('connection') 監聽用戶連接。

socket.on('disconnect') 監聽用戶斷開。

通過回調向客戶端傳遞提示信息。 socket.id 可以用來獨一無二的表示當前會話的客戶端id

//服務端
socket.on('add user',function (msg) { //在用戶第一次加入時，觸發add user，提示所有用戶
            io.emit('user joined',{id: socket.id});
        })
socket.on('disconnect',(reason)=>{
            console.log('disconnect',socket.id,reason);
            io.emit('user left',{id: socket.id})
        })


//客戶端
 socket.on('user joined',function(data){
        let {id} = data;
        $('#messages').append($('<li>').text(id+'加入聊天室').addClass('log'));
    })
    socket.on('user left',function(data){
        let {id} = data;
        $('#messages').append($('<li>').text(id+'離開聊天室').addClass('log'));
    })
  • Add support for nicknames.
//在客戶端提供添加昵稱的輸入框，當輸入完信息後，傳遞昵稱給服務端 
socket.emit('add user', username);

//在服務端重構
 socket.on('add user', function (username) {
     socket.username = username;
     io.emit('user joined', {
            username: socket.username
      });
 })
  • Don’t send the same message to the user that sent it himself. Instead, append the message directly as soon as he presses enter.

通過監聽keydown事件，判定 event.which 的值是否為 13（enter的Unicode碼是13）。如果是則emit 消息

  • Add “{user} is typing” functionality.

通過監聽input事件，來更新type信息

//update
$inputMessage.on('input', function () {
                updateTyping();
            });

function updateTyping() {
     if (connected) {
        if (!typing) {//如果當前沒在輸入，則更改標誌，併發送正在輸入的消息消息
           typing = true;
           socket.emit('typing');
         }
      lastTypingTime = (new Date()).getTime();

      setTimeout(function () {
        var typingTimer = (new Date()).getTime();
        var timeDiff = typingTimer - lastTypingTime;
        if (timeDiff >= TYPING_TIMER_LENGTH && typing) {//如果停止輸入超時，則發送停止消息
          socket.emit('stop typing');
          typing = false;
          }
      }, TYPING_TIMER_LENGTH);
            }
}

//服務端  傳遞當前正在輸入或停止輸入的用戶名，用於讓客戶端顯示或消失 is Typing的信息
        socket.on('typing', function () {
            io.emit('typing', {
                username: socket.username
            });
        });

        socket.on('stop typing', function () {
            io.emit('stop typing', {
                username: socket.username
    });
  • Show who’s online.
  • Add private messaging.

更多案例在官方倉庫中查找

NameSpaces、rooms

namespace允許用戶去分配路徑，這個的好處是可以減少TCP資源，同時進行通道隔離

預設的namespace是/ 通過 of 方法可以自定義namespace

//服務端
const nsp = io.of('/my-namespace');
nsp.on('connection', function(socket){
  console.log('someone connected');
});
nsp.emit('hi', 'everyone!');

//客戶端
const socket = io('/my-namespace');

對於每個namespace，都可以定義多個頻道，也就是room，用戶可以 join 和 left

//服務端
io.on('connection', function(socket){
  socket.join('some room');
});
//當要向某個房間傳數據時，使用 to
io.to('some room').emit('some event');

有的時候需要將數據從一個進程發送到令一個進程，可以通過redis adapter

//一個服務端 可以應用redis adapter
const io = require('socket.io')(3000);
const redis = require('socket.io-redis');
io.adapter(redis({ host: 'localhost', port: 6379 }));

//另一個服務端可以通過連接給服務，從另一個進程的任意頻道發送
const io = require('socket.io-emitter')({ host: '127.0.0.1', port: 6379 });
setInterval(function(){
  io.emit('time', new Date);
}, 5000);

參考鏈接

原來你是這樣的Websocket--抓包分析

SocketIO官方文檔

socket.io簡易教程(群聊，發送圖片，分組，私聊)

socketIO官方案例的GitHub倉庫

fork的chat案例

菜鳥教程 HTML5 WebSocket


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • CSS中的vertical-align屬性
    1，vertical-align屬性的作用？ 設置元素垂直對齊的方式； 2，該屬性使用過程的註意點： 與text-align屬性不同，text-align屬性是設置給需要對齊元素的父元素的， 而vertical-align屬性是設置給需要對其元素本身的； 3，該屬性的取值有哪些？ 3.1，top （ ...
  • Vue中你可能認為是bug的情況原來是這樣的
    前言 我們知道Vue框架劇本雙向數據綁定功能，在我們使用方便的同時，還有一些細節問題我們並不知道，接下來一起探討一些吧 雙向數據綁定 js變數改變影響頁面 頁面改變影響js變數 Vue2是如何做到數據綁定的 以上需要說的就是: Vue中data函數返回的對象，會經過層層遍歷，最後將所有的對象通過以上 ...
  • vue 路由過渡動效
    <router-view> 是基本的動態組件，所以我們可以用 <transition> 組件給它添加一些過渡效果： <transition name="slide-left" mode="out-in"> <router-view /> </transition> 過渡的類名 在進入/離開的過渡中， ...
  • CSS中元素的顯示模式
    在CSS中，根據元素顯示模式的不同元素標簽被分為了兩類:行內元素（inline-level）、塊級元素（block-level）。 1，首先介紹什麼是行內元素，什麼又是塊級元素？ 1.1，行內元素就是不會獨占一行的元素，例如：span buis strong em ins del等 1.2，塊級元素 ...
  • 學習CSS之如何改變CSS偽元素的樣式
    一、CSS偽元素 CSS 偽元素用於向某些選擇器設置特殊效果。 偽元素的用法如下： selector:pseudo-element {property:value;} CSS 類也可以和偽元素搭配使用 selector.class:pseudo-element {property:value;} 二 ...
  • 3年多前端菜雞的面試及知識梳理（上）
    參考 博客 1、 "中高級前端面試題（萬字長文）" 2、 "大前端弔打面試官系列" 資料 1、 "HTML 5 教程" 2、 "CSS3 教程" 3、 "JavaScript 教程" 收費小冊 "前端面試之道" 註：某大佬這本收費小冊乾貨很多，有些參考其中的問題，就不列答案了。 寫在前面的話 因為一 ...
  • RX.js6變化
    RX.js變化 RxJS 6主要用於Angular應用程式，從Angular 6開始，它是一個強制依賴。 與RxJS版本5相比，RxJS 6（或更高版本）引入了兩個重要更改： 1. import的導入結構發生變化 // 以前： import { Observable } from 'rxjs/Obs ...
  • Angular 從入坑到挖坑 - 組件食用指南
    一、Overview angular 入坑記錄的筆記第二篇，介紹組件中的相關概念，以及如何在 angular 中通過使用組件來完成系統功能的實現 對應官方文檔地址： "顯示數據" "模板語法" "用戶輸入" "組件之間的交互" "管道" "生命周期鉤子" 配套代碼地址： "angular pract ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類