您现在的位置是：首页 >技术交流 >WebSocket网站首页技术交流

一、简介

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它允许在浏览器和服务器之间建立实时的、双向的通信，从而使得实时的Web应用程序成为可能。

主要用途：实现实时的Web应用程序，例如在线游戏、聊天应用程序、股票市场行情等等。

（传统的HTTP协议是一种请求-响应协议，客户端需要不断地向服务器发送请求，服务器才能返回响应。这种方式在实现实时通信时效率很低，因为客户端需要不断地发送请求，而服务器也需要不断地返回响应。而WebSocket协议可以在客户端和服务器之间建立一条持久的连接，从而实现实时通信，避免了频繁的请求和响应，提高了通信效率。）

特点：

1. 实时性：WebSocket可以实时地传输数据，不需要等待请求和响应的过程。

2. 双向通信：WebSocket支持双向通信，客户端和服务器可以同时发送和接收数据。

3. 轻量级：WebSocket协议比传统的HTTP协议更轻量级，可以减少通信的开销。

4. 安全性：WebSocket支持加密传输，可以保证数据的安全性。

注意点：

1. 兼容性：WebSocket协议在一些旧浏览器中不被支持，需要使用polyfill或者fallback方案来兼容旧浏览器。

2. 资源占用：WebSocket协议需要建立一条持久连接，会占用一定的服务器资源，需要在设计应用程序时考虑并发性的问题，以保证服务器的稳定性和性能。

3. 安全性：WebSocket协议支持加密传输，但是需要在服务器端进行配置和实现，否则会存在安全隐患。

4. 心跳机制：由于WebSocket连接是长连接，需要使用心跳机制来保持连接的稳定性。

5. 断线重连：由于网络环境的不稳定性，WebSocket连接可能会断开，需要使用断线重连机制来保证连接的稳定性。

6. 跨域：由于WebSocket协议需要在服务器端进行实现，因此可能会存在跨域问题。需要在服务器端进行相关配置，以允许跨域访问。

7. 数据格式：WebSocket协议传输的数据格式可以是文本或二进制数据，可以传输图片、音频、视频等多媒体文件，需要在应用程序中进行相应的解析和处理。

二、服务端实现

使用ServerEndpoint方式实现WebSocket服务端的步骤：

1.引入依赖

<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>

2.配置类

@Configuration
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

 3.ServerEndpoint方式实现

1. 创建一个Java类，并在类上添加@ServerEndpoint注解，指定WebSocket服务端的访问路径。

2. 在类中定义一个或多个方法，用于处理WebSocket客户端的连接、消息和关闭事件。可以使用@OnOpen、@OnMessage、@OnClose等注解来标记这些方法，以便WebSocket容器自动调用它们。

3. 在方法中，可以使用Session对象表示WebSocket客户端的会话，通过调用Session的getBasicRemote()方法获取到一个RemoteEndpoint.Basic对象，然后使用它的sendText()、sendBinary()等方法向客户端发送消息。

下面是一个简单的示例代码，演示了如何使用ServerEndpoint方式实现一个WebSocket服务端：

@ServerEndpoint("/websocket")
public class MyWebSocketServer {

    @OnOpen
    public void onOpen(Session session) {
        System.out.println("WebSocket opened: " + session.getId());
    }

    @OnMessage
    public void onMessage(Session session, String message) {
        System.out.println("Received message: " + message);
        try {
            session.getBasicRemote().sendText("Server received message: " + message);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    @OnClose
    public void onClose(Session session) {
        System.out.println("WebSocket closed: " + session.getId());
    }
}

三、前端实现

类封装websocket的前端js实现：

class WebSocketClient {
  constructor(url) {
    this.url = url;
    this.ws = null;
  }

  connect() {
    this.ws = new WebSocket(this.url);
    this.ws.onopen = () => {
      console.log('WebSocket connected!');
    };
    this.ws.onmessage = (event) => {
      console.log(`Received message: ${event.data}`);
    };
    this.ws.onclose = () => {
      console.log('WebSocket closed!');
    };
    this.ws.onerror = (error) => {
      console.error(`WebSocket error: ${error}`);
    };
  }

  send(message) {
    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
      this.ws.send(message);
    } else {
      console.error('WebSocket is not open!');
    }
  }

  close() {
    if (this.ws) {
      this.ws.close();
    }
  }
}

// 使用示例
const ws = new WebSocketClient('ws://localhost:8080');
ws.connect();
ws.send('Hello, WebSocket!');

Todo:心跳、断线重连