websocket

https://zh.javascript.info/websocket

WebSocket 是一種網(wǎng)絡(luò)通信協(xié)議，就類似于 HTTP 也是一種通信協(xié)議。

為什么需要 WebSocket?

因為 HTTP 協(xié)議有一個缺陷：通信只能由客戶端發(fā)起。

<script>
    // 創(chuàng)建ws實例，建立連接  (ws://121.40.165.18:8800  有廣告)
    var ws = new WebSocket("wss://javascript.info/article/websocket/demo/hello");

    // 連接成功事件
    ws.onopen = function(evt) {
        console.log("Connection open ...");
        // 發(fā)送消息
        ws.send("Hello WebSockets!");
    };
    // 接受消息事件
    ws.onmessage = function(evt) {
        console.log("Received Message: " + evt.data);
        // 關(guān)閉連接  
        ws.close();
    };
    // 關(guān)閉連接事件
    ws.onclose = function(evt) {
        console.log("Connection closed.");
    };
</script>

代碼解析:

1. 創(chuàng)建WebSocket實例：通過new WebSocket()創(chuàng)建一個WebSocket實例。在括號中傳入服務(wù)器的URL，該URL指定了WebSocket服務(wù)器的地址和端口。

2. 連接成功事件：當WebSocket連接成功建立時，onopen事件被觸發(fā)，此時會執(zhí)行指定的回調(diào)函數(shù)。在這個例子中，回調(diào)函數(shù)會向服務(wù)器發(fā)送一條消息，內(nèi)容為"Hello WebSockets!"，通過ws.send()方法發(fā)送。

3. 接收消息事件：當接收到服務(wù)器發(fā)送的消息時，onmessage事件被觸發(fā)，執(zhí)行指定的回調(diào)函數(shù)。在這個例子中，回調(diào)函數(shù)會將接收到的消息打印到控制臺。

4. 關(guān)閉連接事件：當WebSocket連接關(guān)閉時，onclose事件被觸發(fā)，執(zhí)行指定的回調(diào)函數(shù)。在這個例子中，回調(diào)函數(shù)會打印出"Connection closed."。

socket.io使用

socket.io 是什么？

https://socket.io/

socket.io 是一個基于 WebSocket 的 CS（客戶端-服務(wù)端）的實時通信庫，使用它可以在后端提供一個即時通訊服務(wù)，它提供的也有一個 JS 庫，在前端可以去鏈接后端 socket.io 創(chuàng)建的服務(wù)。文章來源地址http://www.zghlxwxcb.cn/news/detail-566127.html

1.裝包

npm install socket.io 

2.使用

如何建立連接？

import io from 'socket.io-client'
// 參數(shù)1：不傳默認是當前服務(wù)域名，開發(fā)中傳入服務(wù)器地址
// 參數(shù)2：配置參數(shù)，根據(jù)需要再來介紹
const socket = io()

如何確定連接成功？

socket.on('connect', () => {
    // 建立連接成功
})

如何發(fā)送消息？

// chat message 發(fā)送消息事件，由后臺約定，可變
socket.emit('chat message', '消息內(nèi)容')

如何接收消息？

// chat message 接收消息事件，由后臺約定，可變
socket.on('chat message', (ev) => {
    // ev 是服務(wù)器發(fā)送的消息
})

如何關(guān)閉連接？

// 離開組件需要使用
socket.close()

心跳機制與斷線重連

const socketURL = 'ws://xxxx.com/' // 連接地址
let ws = null    // websocket實例
let lockReconnect = false; // websocket連接狀態(tài)，避免重復連接
let reconnectTimer = 2000  // 斷開后2s自動重連
 
function setWebsocket() {
  ws = new WebSocket(socketURL)
  ws.addEventListener('open', () => {
    alert('服務(wù)連接成功');
  })
  ws.addEventListener('close', () => {
    alert('服務(wù)已斷開');
    reconnect()
  })
  ws.addEventListener('error', () => {
    alert('服務(wù)發(fā)生異常');
    reconnect()
  })
  ws.addEventListener('message', event => {
    alert('收到消息：', event.data)
  })
}
 
// 重連
function reconnect() {
  if (lockReconnect) return;
  lockReconnect = true;
  setTimeout(function () {
    setWebsocket();
    lockReconnect = false;
  }, reconnectTimer);
}
 
// 頁面關(guān)閉斷開socket連接
window.onbeforeunload = function() {
  ws.close()
  return;
}
 
// 向外暴露
export {
    ws
}

到了這里，關(guān)于websocket實時通訊和socket.io實時通信庫的使用；心跳機制與斷線重連的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！