安装插件

首先，确保你已将相关依赖添加进你的项目中。如果你使用Maven，可以添加下面这段到你的pom.xml

<dependency>
    <groupId>javax.websocket</groupId>
    <artifactId>javax.websocket-api</artifactId>
    <version>1.1</version>
    <scope>provided</scope>
</dependency>

使用Java EE的WebSocket API

创建WebSocket服务器端点

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

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

    @OnOpen
    public void onOpen(Session session) {
        System.out.println("客户端已连接： " + session.getId());
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("接收到客户端消息： " + message);
        
        // 这里可以编写你的处理逻辑
    }

    @OnClose
    public void onClose(Session session) {
        System.out.println("客户端已断开： " + session.getId());
    }
    
    // 错误处理逻辑和其他逻辑...
}

创建WebSocket客户端

import javax.websocket.ContainerProvider;
import javax.websocket.Session;
import javax.websocket.WebSocketContainer;

public class MyWebSocketClient {
    public static void main(String[] args) {
        try {
            WebSocketContainer container = ContainerProvider.getWebSocketContainer();
            String uri = "ws://localhost:8080/websocket";
            Session session = container.connectToServer(MyWebSocketEndpoint.class, URI.create(uri));
            
            // 发送消息
            session.getBasicRemote().sendText("Hello WebSocket");
            
            // 接收消息在MyWebSocketEndpoint中定义
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

使用Spring WebSocket

Spring WebSocket配置

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new MyWebSocketHandler(), "/websocket");
    }
}

WebSocket处理器

import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

public class MyWebSocketHandler extends TextWebSocketHandler {

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        System.out.println("接收到客户端消息： " + message.getPayload());
        
        // 发送消息回客户端
        session.sendMessage(new TextMessage("Hello from server"));
    }

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("客户端已连接：" + session.getId());
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        System.out.println("客户端已断开：" + session.getId());
    }
}

前端链接 使用wss://协议

在前端处理WebSocket连接，通常使用浏览器内置的 WebSocket API。它是一个简单的API，允许你从前端建立与后端之间的WebSocket连接，进行实时通信。

建立WebSocket连接

const socket = new WebSocket('ws://localhost:8080/websocket');

实现WebSocket事件处理

// 连接打开事件
socket.onopen = function(event) {
  console.log('WebSocket连接已打开');
  // 发送一个消息到服务器
  socket.send('Hello, WebSocket!');
};

// 处理从服务器接收到的消息
socket.onmessage = function(event) {
  console.log('收到消息：', event.data);
};

// 处理错误
socket.onerror = function(event) {
  console.error('WebSocket发生错误：', event);
};

// 处理连接关闭
socket.onclose = function(event) {
  console.log('WebSocket连接已关闭', event.code, event.reason);
};

发送消息到服务器

socket.send('Hello, Server!'); // 发送文本
socket.send(new Blob(["Hi"], {type: 'text/plain'})); // 发送Blob数据
socket.send(new ArrayBuffer(8)); // 发送ArrayBuffer数据

可靠性和重新连接

由于网络问题或其他原因，WebSocket连接可能会断开。如果你需要更可靠的连接，可能需要实现自动重连机制：

let socket;
let retries = 0;

function connect() {
    socket = new WebSocket('ws://localhost:8080/websocket');

    socket.addEventListener('open', function (event) {
        retries = 0;
        console.log('Connected to the WebSocket server');
    });

    socket.addEventListener('close', function (event) {
        if (!event.wasClean && retries < 5) {
            setTimeout(connect, 5000);
            retries ++;
        }
    });

    // 其他事件监听...
}

connect(); // 初始化连接

关闭WebSocket连接

socket.close();

总结

在实际应用中，前端可能需要一些逻辑来控制重连、消息格式处理（例如JSON的编码和解码）、心跳检测以维持连接不被断开等。

但是一般会用组件，如React、Vue，可以将WebSocket逻辑包装到一个服务或hook中，并在对应的的生命周期中初始化和销毁WebSocket连接。

另外，对于一些复杂的场景，可能会使用一些封装了WebSocket和提供了更丰富功能的库（如socket.io）

为了安全性，服务器端还需要实现适当的身份验证和授权机制，并在前端采取措施以保护用户数据。WebSocket与传统HTTP相比，提供了较低延迟的通讯方式，所以natty运用而生

vue2示例生命周期伪代码

<template>
  <div>
    <!-- 你的组件模板 -->
  </div>
</template>

<script>
import setupWebSocket from './websocket.js';

export default {
  data() {
    return {
      // 数据属性
    };
  },
  created() {
    // 组件被创建时，设置WebSocket连接
    const { socket, send } = setupWebSocket(this.handleMessage);
    
    // 将socket和send存储在Vue实例上以便其他方法使用
    this.socket = socket;
    this.send = send;
  },
  beforeDestroy() {
    // 组件销毁前，关闭WebSocket连接
    if (this.socket) {
      this.socket.close();
    }
  },
  methods: {
    handleMessage(event) {
      // 处理接收到的消息
      console.log('收到WebSocket消息：', event.data);
    },
    sendMessage(msg) {
      // 通过WebSocket发送消息
      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
        this.send(msg);
      } else {
        console.error('WebSocket连接未开启');
      }
    },
  },
};
</script>