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();
}
相关推荐
AD钙奶-lalala1 天前
SpringBoot实现WebSocket服务端
spring boot·后端·websocket
wow_DG1 天前
【WebSocket✨】入门之旅(五):WebSocket 的安全性
网络·websocket·网络协议
往事随风去1 天前
别再纠结了!IM场景下WebSocket和MQTT的正确选择姿势,一文讲透!
后端·websocket·架构
郝亚军2 天前
websocket 服务器往客户端发送的数据要加掩码覆盖吗?
服务器·网络·websocket
威斯软科的老司机2 天前
WebSocket压缩传输优化:机器视觉高清流在DCS中的低延迟方案
网络·websocket·网络协议
木头左2 天前
讯飞星火大模型Spark4.0Ultra的WebSocket交互实现解析
websocket·网络协议·交互
paopaokaka_luck2 天前
绿色环保活动平台(AI问答、WebSocket即时通讯、协同过滤算法、Echarts图形化分析)
java·网络·vue.js·spring boot·websocket·网络协议·架构
wow_DG2 天前
【WebSocket✨】入门之旅(三):WebSocket 的实战应用
网络·websocket·网络协议
齐穗穗2 天前
springboot集成websocket
spring boot·后端·websocket
千鼎数字孪生-可视化3 天前
WebSocket实时推送技术:PLC状态监控大屏的高效实现路径
网络·websocket·网络协议