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();
}
相关推荐
coderSong256820 小时前
Java高级 |【实验八】springboot 使用Websocket
java·spring boot·后端·websocket
利刃大大1 天前
【在线五子棋对战】二、websocket && 服务器搭建
服务器·c++·websocket·网络协议·项目
阿琳a_1 天前
前端对WebSocket进行封装,并建立心跳监测
前端·javascript·vue.js·websocket
2501_915106321 天前
Flutter、React Native 项目如何搞定 iOS 上架?从构建 IPA 到上传 App Store 的实战流程全解析
websocket·网络协议·tcp/ip·http·网络安全·https·udp
小白杨树树2 天前
【WebSocket】SpringBoot项目中使用WebSocket
spring boot·websocket·网络协议
Sherry0072 天前
实时数据传输协议:WebSocket vs MQTT
前端·websocket
Icoolkj2 天前
WebRTC 与 WebSocket 的关联关系
websocket·网络协议·webrtc
2501_916007472 天前
绕过 Xcode?使用 Appuploader和主流工具实现 iOS 上架自动化
websocket·网络协议·tcp/ip·http·网络安全·https·udp
2501_916013742 天前
使用 Windows 完成 iOS 应用上架:Appuploader对比其他证书与上传方案
websocket·网络协议·tcp/ip·http·网络安全·https·udp
一只帆記3 天前
HTTP、WebSocket、SSE 对比
websocket·http