日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

【websocket】前端websocket 實時通信

作者：DC... 更新時間： 2024-03-01 編程語言

前端websocket 實時通信

文章目錄

  • 前端websocket 實時通信
    • 什么是websocket
    • 為什么傳統的http協議不能做到websocket實現的功能
    • websocket前后端所用到的事件對比
    • WebSocket.readyState
    • 代碼

什么是websocket

websocket是HTML5開始提供的一種網絡通信協議，它誕生的目的是在瀏覽器之間建立一個不受限的雙方通信的通道，比如說，服務器可以在任意時刻發送信息給瀏覽器。在websocket的API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，并進行雙向數據傳輸

為什么傳統的http協議不能做到websocket實現的功能

http協議是一個請求-響應協議，請求必須先由瀏覽器發送給服務器，服務器才能響應

websocket前后端所用到的事件對比

在這里插入圖片描述

WebSocket.readyState

  • readyState 屬性返回實例對象的當前狀態，共有四種狀態
  • 0 - 表示正在連接
  • 1 - 表示連接成功，可以進行通信
  • 2 - 表示連接正在關閉
  • 3 - 表示連接已經關閉，或者打開連接失敗

代碼

安裝ws包

npm i ws -d

websocket連接成功會生成一個key，key是用來標識連接的，而不是加密的

index.htm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h3>我是客戶端</h3>


    <script>
      let ws = new WebSocket('ws://localhost:5000') //接口地址
      //連接成功后
      ws.onopen = (evt) => {
        console.log('連接開啟')
        ws.send('hello 我是客戶端') //利用send向后端發送數據
      }

      //傳遞和接收服務器數據的方法
      ws.onmessage = (evt) => {
        console.log('我是服務器傳遞過來的消息---' + evt.data)
        ws.send('我是客戶端發送的第二條信息')
        ws.close()
      }

      // 連接失敗時觸發
      ws.onerror = () => {
        alert('連接失敗')
      }

      // 連接關閉
      ws.onclose = () => {
        alert('連接關閉')
      }
    </script>
  </body>
</html>

index.js

const Websocket = require("ws")
//引用server類并且實例化，定義服務器端口為3306
const wss = new Websocket.Server({ port: 5000 })

wss.on("connection", (ws) => {
    ws.on("message", (message) => {
        console.log(`客戶端發送過來的信息是${message}`);
        ws.send("我是服務器")
    })
})

原文鏈接：https://blog.csdn.net/m0_63779088/article/details/128615527

  • 上一篇：沒有了
  • 下一篇：沒有了
欄目分類
最近更新