WebSocket实现原理

---

这里讲述什么是websocket，它与http的区别在哪里，有什么用处呢

---

一、socket

• 客户端连接服务器(TCP/IP)，三次握手，建立了连接通道
• 客户端和服务器通过Socket接口发送消息和接收消息，任何一端在任何时候，都可向另一端发送任何消息
• 有一端断开，通道销毁

二、http

• 客户端连接服务器(TCP/IP)，三次握手，建立了连接通道
• 客户端发送一个http格式的消息(消息头 体)，服务器响应HTTP格式的消息(消息头 体)
• 客户端或服务器断开，通道销毁。

三、socket和http区别

• HTTP协议是基于TCP/IP的，客户端通过三次握手建立连接通道，发送HTTP格式的消息。
• Socket是无线双工通信，双方都可以在任何时刻主动发送消息，无需等待对方响应。
• HTTP协议有消息头和消息体，消息体可以包含任意格式的数据。
• HTTP连接在发送一次请求和响应后通常断开，除非使用了keep-alive选项。

四、实时性问题

• 实时性问题是指服务器需要实时更新客户端的数据，如股票信息、聊天消息等。
• HTTP协议由于是客户端主动发起请求，服务器无法主动推送数据给客户端。
• 轮询是一种解决方案，客户端定时向服务器发送请求检查数据是否更新。
• 长链接(请求头携带Connection: keep-alive)是一种改进方案，客户端与服务器建立持续连接，服务器在数据更新时响应客户端。

五、webSocket使用

专门用于解决实时性传输的问题

• 客户端连接服务器(TCP/IP)，三次握手，建立了连接通道
• 客户端发送http格式信息(特殊信息)，服务器也响应一个http格式的消息(特殊格式)，称之为http握手
• 双方自由通信，通信格式按照websocket的要求进行
• 客户端或服务器断开，通道销毁

<button id="sendButton">发送消息</button>
// 客户端(浏览器) websocket
const ws = new WebSocket("ws://localhost:8000"); // 创建一个websocket，同时，发送连接到服务器
// 连接成功
ws.onopen = function () { console.log('已连接到服务器') }
// 处理接收到的消息
ws.message = function (event) { console.log('收到服务器消息:', event.data) };
ws.onclose = function () { console.log("通道关闭") };
// 发送消息函数
function handleSendMessage(message) {
    if (ws.readyState !== WebSocket.OPEN) {
        console.log('连接未就绪，请稍后');
        return;
    }
    ws.send(message);
}
document.getElementById("sendButton").onclick = function () {
    handleSendMessage(ws, "你好服务器")
}

六、第三方库Socket.IO

提供更高级的功能和自动重连。中文网 官网

npm i socket.io-cliet
import io from "socket.io-client";
const socket = io("your-server-url");

七、在vue中使用websocket

在 Vue 项目中使用 WebSocket 可以实现实时通信功能。以下是详细步骤和示例代码：

一、基本使用步骤

1. 创建 WebSocket 连接
   • 在 Vue 组件的生命周期钩子（如 created 或 mounted）中初始化 WebSocket
2. 监听事件
   • onopen：连接建立
   • onmessage：接收消息
   • onerror：发生错误
   • onclose：连接关闭
3. 发送消息
   • 通过 WebSocket.send() 方法
4. 销毁连接
   • 在组件销毁前（beforeDestroy 或 beforeUnmount）关闭连接

二、代码示例（选项式 API）

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
    <div>接收到的消息：{{ receivedData }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ws: null,
      receivedData: "",
    };
  },
  created() {
    this.initWebSocket();
  },
  beforeDestroy() {
    this.ws.close(); // 组件销毁时关闭连接
  },
  methods: {
    initWebSocket() {
      // 替换为你的 WebSocket 服务端地址
      this.ws = new WebSocket("ws://your-websocket-server-url");

      this.ws.onopen = () => {
        console.log("WebSocket 连接已建立");
      };

      this.ws.onmessage = (event) => {
        this.receivedData = event.data;
      };

      this.ws.onerror = (error) => {
        console.error("WebSocket 错误:", error);
      };

      this.ws.onclose = () => {
        console.log("WebSocket 连接已关闭");
      };
    },
    sendMessage() {
      if (this.ws.readyState === WebSocket.OPEN) {
        this.ws.send("Hello Server!");
      } else {
        console.error("WebSocket 未连接");
      }
    },
  },
};
</script>

三、使用技巧和注意事项

1. 自动重连机制

   methods: {
     initWebSocket() {
       this.ws = new WebSocket("ws://your-server-url");
       // ...其他事件监听
   
       this.ws.onclose = () => {
         setTimeout(() => {
           console.log("尝试重新连接...");
           this.initWebSocket();
         }, 3000); // 3秒后重连
       };
     }
   }
   

2. 封装为独立模块
   创建 src/utils/websocket.js：

   class MyWebSocket {
     constructor(url) {
       this.ws = new WebSocket(url);
       this.ws.onopen = () => console.log("Connected");
       this.ws.onmessage = (e) => this.handleMessage(e.data);
     }
   
     handleMessage(data) {
       // 处理消息逻辑
     }
   
     send(data) {
       if (this.ws.readyState === WebSocket.OPEN) {
         this.ws.send(JSON.stringify(data));
       }
     }
   }
   export default MyWebSocket;
   

3. 结合 Vuex/Pinia
   在状态管理库中管理 WebSocket 连接和数据

4. 安全注意事项

   • 使用 wss:// 替代 ws:// 进行加密通信
   • 验证消息来源，防止恶意数据

四、服务端示例（Node.js）

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    console.log('收到消息:', message);
    ws.send(`服务器回复：${message}`);
  });
});

五、常见问题

1. 跨域问题

   • 确保服务端配置允许跨域
   • 开发环境可通过 Vue CLI 代理配置解决

2. 连接状态检查

   • 使用 WebSocket.readyState 检查连接状态
   • 常量值：CONNECTING(0), OPEN(1), CLOSING(2), CLOSED(3)

3. 大数据量处理

   • 使用分片传输或二进制数据格式

通过以上方法，你可以在 Vue 项目中轻松实现 WebSocket 通信功能。根据项目需求选择原生实现或第三方库方案。