前端使用webSocket与后台建立连接并进行心跳监测机制

1:前端代码如下

首先项目中需要引入websocket

javascript 复制代码
  // WebSocket对象方法
  getWebSocket(){
    // 创建一个 websocket 连接
    var ws = new WebSocket("ws://10.66.78.118:8085/api/cloud/ws");
    // websocket 创建成功事件
    ws.onopen = function (event) {
      window.setInterval(function ping() {
        ws.send('Hello, WebSocket!'); // 发送一条消息
        console.log('已发送消息');
      }, 10000);
      console.log('WebSocket连接成功',event);
    };
    // websocket 接收到消息事件
    ws.onmessage = function (e) {
      const messageContent = JSON.parse(e.data);
      console.log('收到消息:', messageContent);
      var msg = JSON.parse(e.data);
      console.log(msg,'消息事件')
    }
    // 关闭
    ws.onclose = function close() {
      console.log('Disconnected');
    };
    // websocket 错误事件
    ws.onerror = function (error) {
      console.error('WebSocket error observed:', error);
    };
  }
  

2.在页面初始化的时候调用getWebSocket此方法

相关推荐
懒人村杂货铺几秒前
前端步入全栈第一步
前端·docker·fastapi
代码游侠4 分钟前
复习——网络编程基础
linux·服务器·网络·笔记·网络协议
小码过河.7 分钟前
vue-office使用指南
前端·javascript·vue.js
wuhen_n16 分钟前
LeetCode -- 349. 两个数组的交集(简单)
前端·javascript·算法·leetcode
cypking26 分钟前
三、NestJS 开发实战文档-->集成 MySQL(TypeORM)
前端·数据库·mysql·adb·node.js
dreams_dream26 分钟前
Element UI菜单折叠后的el-menu-item属性无法修改问题解决
前端·vue
duanyuehuan27 分钟前
vueRouter重置路由
前端·javascript·vue.js
Misnearch34 分钟前
npm包-serve包使用
前端·npm·node.js
IT_陈寒38 分钟前
React 18 性能优化实战:5个被低估的Hooks用法让你的应用快30%
前端·人工智能·后端
渡我白衣39 分钟前
Linux 网络编程 ——2025年度深度总结
网络协议·tcp/ip·https·udp·信息与通信·p2p·tcpdump