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

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

【websocket】前端websocket 實(shí)時(shí)通信

作者：DC... 更新時(shí)間： 2024-03-01 編程語(yǔ)言

前端websocket 實(shí)時(shí)通信

文章目錄

  • 前端websocket 實(shí)時(shí)通信
    • 什么是websocket
    • 為什么傳統(tǒng)的http協(xié)議不能做到websocket實(shí)現(xiàn)的功能
    • websocket前后端所用到的事件對(duì)比
    • WebSocket.readyState
    • 代碼

什么是websocket

websocket是HTML5開(kāi)始提供的一種網(wǎng)絡(luò)通信協(xié)議，它誕生的目的是在瀏覽器之間建立一個(gè)不受限的雙方通信的通道，比如說(shuō)，服務(wù)器可以在任意時(shí)刻發(fā)送信息給瀏覽器。在websocket的API 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸

為什么傳統(tǒng)的http協(xié)議不能做到websocket實(shí)現(xiàn)的功能

http協(xié)議是一個(gè)請(qǐng)求-響應(yīng)協(xié)議，請(qǐng)求必須先由瀏覽器發(fā)送給服務(wù)器，服務(wù)器才能響應(yīng)

websocket前后端所用到的事件對(duì)比

在這里插入圖片描述

WebSocket.readyState

  • readyState 屬性返回實(shí)例對(duì)象的當(dāng)前狀態(tài)，共有四種狀態(tài)
  • 0 - 表示正在連接
  • 1 - 表示連接成功，可以進(jìn)行通信
  • 2 - 表示連接正在關(guān)閉
  • 3 - 表示連接已經(jīng)關(guān)閉，或者打開(kāi)連接失敗

代碼

安裝ws包

npm i ws -d

websocket連接成功會(huì)生成一個(gè)key，key是用來(lái)標(biāo)識(shí)連接的，而不是加密的

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>我是客戶(hù)端</h3>


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

      //傳遞和接收服務(wù)器數(shù)據(jù)的方法
      ws.onmessage = (evt) => {
        console.log('我是服務(wù)器傳遞過(guò)來(lái)的消息---' + evt.data)
        ws.send('我是客戶(hù)端發(fā)送的第二條信息')
        ws.close()
      }

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

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

index.js

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

wss.on("connection", (ws) => {
    ws.on("message", (message) => {
        console.log(`客戶(hù)端發(fā)送過(guò)來(lái)的信息是${message}`);
        ws.send("我是服務(wù)器")
    })
})

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

  • 上一篇：沒(méi)有了
  • 下一篇：沒(méi)有了
欄目分類(lèi)
最近更新