前端使用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此方法

相关推荐
Cache技术分享4 分钟前
254. Java 集合 - 使用 Lambda 表达式操作 Map 的值
前端·后端
CryptoPP15 分钟前
使用 KLineChart 这个轻量级的前端图表库
服务器·开发语言·前端·windows·后端·golang
p***434821 分钟前
前端路由管理
前端
是一碗螺丝粉1 小时前
React Native 运行时深度解析
前端·react native·react.js
Jing_Rainbow1 小时前
【前端三剑客-9 /Lesson17(2025-11-01)】CSS 盒子模型详解:从标准盒模型到怪异(IE)盒模型📦
前端·css·前端框架
爱泡脚的鸡腿1 小时前
uni-app D6 实战(小兔鲜)
前端·vue.js
青年优品前端团队1 小时前
🚀 不仅是工具库,更是国内前端开发的“瑞士军刀” —— @qnvip/core
前端
北极糊的狐1 小时前
Vue3 中父子组件传参是组件通信的核心场景,需遵循「父传子靠 Props,子传父靠自定义事件」的原则,以下是资料总结
前端·javascript·vue.js
看到我请叫我铁锤2 小时前
vue3中THINGJS初始化步骤
前端·javascript·vue.js·3d