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

相关推荐
哆啦A梦158811 分钟前
Vue3魔法手册 作者 张天禹 11_自定义hooks
前端·vue.js·typescript
广州华水科技16 分钟前
单北斗变形监测在大坝安全和地质灾害预警中的应用与优势
前端
阿珊和她的猫29 分钟前
深入理解 Vue 3 的 `setup` 函数
前端·vue.js·状态模式
weixin1997010801635 分钟前
微店商品详情页前端性能优化实战
前端·性能优化
星火开发设计41 分钟前
STL 容器:vector 动态数组的全面解析
java·开发语言·前端·c++·知识
天開神秀1 小时前
解决 n8n 在 Windows 上安装社区节点时 `spawn npm ENOENT/EINVAL` 错误
前端·windows·npm
工业HMI实战笔记1 小时前
图标标准化:一套可复用的工业图标库设计指南
前端·ui·性能优化·自动化·汽车·交互
2501_926978331 小时前
分形时空理论框架:从破缺悖论到意识宇宙的物理学新范式引言(理论概念版)--AGI理论系统基础1.1
java·服务器·前端·人工智能·经验分享·agi
We་ct1 小时前
LeetCode 146. LRU缓存:题解+代码详解
前端·算法·leetcode·链表·缓存·typescript
REDcker1 小时前
HTTP 协议发展详解:从 HTTP/1 到 HTTP/3
网络·网络协议·http