WebSocket的使用

WebSocket概念

WebSocket 是一种常用的网络协议。它允许在单个 TCP 连接上建立双向通信通道，以便服务器和客户端可以在任何时候交换数据。 WebSocket 被设计用于取代传统的基于 HTTP 请求-响应模式的轮询或长轮询方法，从而实现更高效的实时通信

主要特点：

• 持久性： WebSocket 连接在客户端和服务器之间始终保持打开状态，而不需要在每次通信时都重新建立连接。这种持久性减少了连接建立和断开的开销，提高了通信的效率。
• 双向通信： WebSocket 允许服务器和客户端之间双向发送消息。服务器可以向客户端推送数据，客户端也可以主动向服务器发送数据，实现实时的双向通信。
• 低延迟： 由于连接的持久性和双向通信特性，WebSocket 可以在数据到达时立即将其推送给接收方，从而实现低延迟的通信。

协议支持： WebSocket 是一种独立的协议，不同于 HTTP，但仍使用 HTTP 进行握手和升级连接。这意味着 WebSocket 可以在现有的网络基础设施上运行，因为大多数网络环境允许 HTTP 流量通过。WebSocket 连接的端口号通常是 80（HTTP）或 443（HTTPS）。

数据格式： WebSocket 并没有指定特定的数据格式，允许开发者根据应用需求自由选择数据格式，例如 JSON、XML、二进制数据等。

安全性： 与其他网络协议一样，WebSocket 通信也需要考虑安全性。可以通过使用安全套接字层（SSL/TLS）来加密通信数据，确保数据在传输过程中的保密性和完整性。

使用场景： 实时聊天和通信应用；金融和股票市场；在线编辑和协同文档；实时视频和音频通信；通知和提醒系统：比特币网站； 在线提醒、通知和推送系统，例如在后端数据更新时实时通知用户，WebSocket 可以让服务器向客户端推送通知，避免了客户端轮询的开销；等等

js中使用WebSocket

//1.创建 WebSocket 对象, 参数:服务器的 WebSocket URL 
const socket = new WebSocket("ws://xxx/socket");



//2.监听事件： WebSocket 对象会触发不同类型的事件，用于处理连接的不同状态和数据的接收。

//open：连接成功建立时触发。
socket.addEventListener("open", (event) => {
  console.log("WebSocket connection opened");
});

//message：接收到消息时触发。
socket.addEventListener("message", (event) => {
  const message = event.data;
  console.log("Received message:", message);
});

//close：连接关闭时触发。
socket.addEventListener("close", (event) => {
  console.log("WebSocket connection closed");
});

//error：连接发生错误时触发。
socket.addEventListener("error", (event) => {
  console.error("WebSocket error:", event);
});



// 3.发送和接收数据

// 发送消息
const messageToSend = "Hello, server!";
socket.send(messageToSend);

// 接收消息
socket.addEventListener("message", (event) => {
  const receivedMessage = event.data;
  console.log("Received message:", receivedMessage);
});


// 4.关闭连接
socket.close();

vue中使用 WebSocket

1、安装 WebSocket 库（vue-native-websocket）：

npm install vue-native-websocket

2、组件中引入，并使用

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>


<script>
import VueNativeSock from "vue-native-websocket";
export default {
  
  created() {
    //基本配置
    Vue.use(VueNativeSock, "ws://xxx/socket", {
      format: "json",
      reconnection: true, // 是否自动重连
      reconnectionAttempts: 5, // 重连尝试次数
    });
    
    //接收消息并处理
    this.$options.sockets.onmessage = (event) => {
      const message = JSON.parse(event.data);
      console.log("message:", message);
    };
  },
  
  
  methods: {
    //发送消息
    sendMessage() {
      const messageToSend = { text: "Hello, server!" };
      this.$socket.sendObj(messageToSend);
    },
  }, 
  
  
  beforeDestroy() {
    //关闭连接
    this.$socket.close();
  }
};
</script>