如何通过websoket实现即时通讯+断线重连?_websocket断线重连

作者：神奇cpp | 2024-07-26 06:41:48

踩

websocket断线重连

本篇博客只是一个demo，具体应用还要结合项目实际情况，以下是目录结构：

1.首先通过express搭建一个本地服务器

npm install express

2.在serve.js中自定义测试数据


const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
 
app.get('/', (req, res) => {
  res.send('服务器搭好了');
});
 
app.get('/list', (req, res) => {
  res.send([
    { id: 1, name: 'Tom', age: 18 },
    { id: 2, name: 'Jerry', age: 12 },
    { id: 3, name: 'houseHolder', age: 30 }
  ]);
});
 
// 0.0.0.0 表示监听当前机器所有ip 包含本机ip和外网ip
server.listen(2000, '0.0.0.0', () => {
  console.log('127.0.0.1:2000');
});

3.运行服务器

node serve.js

注：如何查看所有ip ？（本地+外网ip）

npm install http-server

终端直接输入：http-server

4.测试服务器是否开启

发送请求，可以拿到返回的数据，服务器开启成功

5.通过 socket.io-client 实现客户端代码

npm install socket.io-client

6.创建websocket服务器


const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
 
+const { Server } = require("socket.io");
+// 创建了一个websocket服务器,并解决了跨域的问题
+const io = new Server(server, { cors: true });
 
+// 监听与客户端的连接事件
+io.on('connection', socket => {
  console.log('服务端连接成功');
  // 监听浏览器传过来的事件
  socket.on('handle', (e) => {
    console.log(e, 'app传过来的数据');
    socket.emit('message', e);
  })
})
 
app.get('/', (req, res) => {
  res.send('服务器搭好了');
});
 
app.get('/list', (req, res) => {
  res.send([
    { id: 1, name: 'Tom', age: 18 },
    { id: 2, name: 'Jerry', age: 12 },
    { id: 3, name: 'houseHolder', age: 30 }
  ]);
});
 
// npm install -g http-server查看所有ip  0.0.0.0 表示监听当前机器所有ip 包含本机ip和外网ip
server.listen(2000, '0.0.0.0', () => {
  console.log('127.0.0.1:2000');
});

7.在app/index.js中导入socket.io的cdn线上包，并连接本地服务器


<!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>
  <script src="https://cdn.socket.io/4.4.0/socket.io.min.js"></script>
</head>
 
<body>
  <input type="text" id="ipt" placeholder="请输入内容">
  <button id="btn">按钮</button>
 
  <script>
    let socket = io('ws://192.168.18.162:2000')
    // 监听浏览器、服务器是否建立连接
    socket.on('connect', () => {
      console.log('浏览器和服务器连接上了');
    })
 
    socket.on('message', (e) => {
      console.log(e, '服务器传过来的值');
    })
 
    const btn = document.querySelector('#btn')
    const ipt = document.querySelector('#ipt')
    btn.addEventListener('click', () => {
      console.log(ipt.value, 'input框信息');
      // 向服务器传递表单数据
      socket.emit('handle', ipt.value);
    })
  </script>
</body>
 
</html>

8.连接成功客户端和服务器都可以获取input框的值

9.优化：解决断线重连问题

思路：客户端在监听是否和服务端连接成功的函数中，监听断线函数，如果连接失败设置定时器每3s重新建立连接


<!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>
  <script src="https://cdn.socket.io/4.4.0/socket.io.min.js"></script>
</head>
 
<body>
  <input type="text" id="ipt" placeholder="请输入内容">
  <button id="btn">按钮</button>
 
  <script>
    let socket = io('ws://192.168.18.162:2000')
    // 监听浏览器、服务器是否建立连接
    socket.on('connect', () => {
      console.log('浏览器和服务器连接上了');
 
      // 解决:断线重连
      console.dir(socket)
      socket.on('disconnect', () => {
        let intervalSocket = null
        intervalSocket = setInterval(() => {
          console.log("disconnect:" + socket.disconnected)
          if (socket.disconnected) {
            socket = io('ws://192.168.18.162:2000')
          } else {
            clearInterval(intervalSocket)
          }
        }, 3000)
      })
 
    })
 
    socket.on('message', (e) => {
      console.log(e, '服务器传过来的值');
    })
 
    const btn = document.querySelector('#btn')
    const ipt = document.querySelector('#ipt')
    btn.addEventListener('click', () => {
      console.log(ipt.value, 'input框信息');
      // 向服务器传递表单数据
      socket.emit('handle', ipt.value);
    })
  </script>
</body>
 
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/神奇cpp/article/detail/883987