websocket时事通讯和socket.io实时通信库的使用;心跳机制与断线重连

websocket

https://zh.javascript.info/websocket

WebSocket 是一种网络通信协议,就类似于 HTTP 也是一种通信协议。

为什么需要 WebSocket?

因为 HTTP 协议有一个缺陷:通信只能由客户端发起。

<script>
    // 创建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 ...");
        // 发送消息
        ws.send("Hello WebSockets!");
    };
    // 接受消息事件
    ws.onmessage = function(evt) {
        console.log("Received Message: " + evt.data);
        // 关闭连接  
        ws.close();
    };
    // 关闭连接事件
    ws.onclose = function(evt) {
        console.log("Connection closed.");
    };
</script>

代码解析:

  1. 创建WebSocket实例:通过new WebSocket()创建一个WebSocket实例。在括号中传入服务器的URL,该URL指定了WebSocket服务器的地址和端口。

  2. 连接成功事件:当WebSocket连接成功建立时,onopen事件被触发,此时会执行指定的回调函数。在这个例子中,回调函数会向服务器发送一条消息,内容为"Hello WebSockets!",通过ws.send()方法发送。

  3. 接收消息事件:当接收到服务器发送的消息时,onmessage事件被触发,执行指定的回调函数。在这个例子中,回调函数会将接收到的消息打印到控制台。

  4. 关闭连接事件:当WebSocket连接关闭时,onclose事件被触发,执行指定的回调函数。在这个例子中,回调函数会打印出"Connection closed."。

socket.io使用

socket.io 是什么?

https://socket.io/

socket.io 是一个基于 WebSocket 的 CS(客户端-服务端)的实时通信库,使用它可以在后端提供一个即时通讯服务,它提供的也有一个 JS 库,在前端可以去链接后端 socket.io 创建的服务。

1.装包

npm install socket.io 

2.使用

如何建立连接?

import io from 'socket.io-client'
// 参数1:不传默认是当前服务域名,开发中传入服务器地址
// 参数2:配置参数,根据需要再来介绍
const socket = io()

如何确定连接成功?

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

如何发送消息?

// chat message 发送消息事件,由后台约定,可变
socket.emit('chat message', '消息内容')

如何接收消息?

// chat message 接收消息事件,由后台约定,可变
socket.on('chat message', (ev) => {
    // ev 是服务器发送的消息
})

如何关闭连接?

// 离开组件需要使用
socket.close()

心跳机制与断线重连

const socketURL = 'ws://xxxx.com/' // 连接地址
let ws = null    // websocket实例
let lockReconnect = false; // websocket连接状态,避免重复连接
let reconnectTimer = 2000  // 断开后2s自动重连
 
function setWebsocket() {
  ws = new WebSocket(socketURL)
  ws.addEventListener('open', () => {
    alert('服务连接成功');
  })
  ws.addEventListener('close', () => {
    alert('服务已断开');
    reconnect()
  })
  ws.addEventListener('error', () => {
    alert('服务发生异常');
    reconnect()
  })
  ws.addEventListener('message', event => {
    alert('收到消息:', event.data)
  })
}
 
// 重连
function reconnect() {
  if (lockReconnect) return;
  lockReconnect = true;
  setTimeout(function () {
    setWebsocket();
    lockReconnect = false;
  }, reconnectTimer);
}
 
// 页面关闭断开socket连接
window.onbeforeunload = function() {
  ws.close()
  return;
}
 
// 向外暴露
export {
    ws
}

你可能感兴趣的:(websocket,网络协议,网络)