当前位置: 首页 > article >正文

websocket vue操作

let websocket: WebSocket;
/** websocket测试 */
function connectWebsocket() {
  if (typeof WebSocket === "undefined") {
    console.log("您的浏览器不支持WebSocket");
    return;
  }

  // let ip = window.location.hostname + ":8080";
  let ip = "10.192.30.161:8080";
  let url = `ws://${ip}/websocket/download`;
  // 打开一个websocket
  websocket = new WebSocket(url);

  // 建立连接
  websocket.onopen = () => {
    console.log("websocket已连接");
    // websocket.send("ping");
  };
  // 客户端接收服务端返回的数据
  websocket.onmessage = (evt) => {
    let data = evt.data
    console.log("websocket返回的数据:", data);
    if (data.length > 0) {
      handleSearch();
    }
  };
  // 发生错误时
  websocket.onerror = (evt) => {
    console.log("websocket错误:", evt);
  };
  // 关闭连接
  websocket.onclose = (evt) => {
    console.log("websocket关闭:", evt);
  };
}
connectWebsocket();

// 监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
window.onbeforeunload = function () {
  websocket.close();
}

http://www.kler.cn/news/163218.html

相关文章:

  • 快速学会绘制Pyqt5中的所有图(下)
  • Kafka安全性探究:构建可信赖的分布式消息系统
  • 二叉树的非递归遍历(详解)
  • 一款可无限扩展的软件定时器开源框架项目代码
  • 三星AI笔电:年底大战一触即发,行业变革在即
  • 【数据结构和算法】种花问题
  • 快速搭建MyBatis源码调试环境
  • 麒麟V10服务器安装Apache+PHP
  • 基于OpenCV的人脸识别系统案例
  • 交换排序(冒泡排序)(快速排序(1))
  • ElasticSearch之Task management API
  • SQLite基本使用
  • mybatis和mybatisplus中对 同namespace 中id重复处理逻辑源码解析
  • 关于前端原生技术-Jsonp的理解与简述
  • 如何快速构建知识服务平台,打造个人或企业私域流量
  • 二维码智慧门牌管理系统:升级解决方案实现多领域数据综合应用
  • WPF实现文字纵向排布的TabItem
  • 使用 HTML 地标角色提高可访问性
  • printf二进制输出
  • 线程安全与并发区别
  • java中synchronized关键字的用法
  • 带你真正理解web地图切片规则
  • 智能优化算法应用:基于指数分布算法无线传感器网络(WSN)覆盖优化 - 附代码
  • 初识 pytest 及断言使用
  • 风控反欺诈安全学习路标
  • JumpServer初探
  • nodejs流
  • 异常检测 | MATLAB实现BiLSTM(双向长短期记忆神经网络)数据异常检测
  • 使用消息队列遇到的问题—kafka
  • ubuntu 系统部署 Stable Video Diffusion