WebSocket 入门级教程

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WebSocket 示例</title>
</head>
<body>
    <h1>WebSocket 客户端</h1>
    <button onclick="connect()">连接服务器</button>
    <button onclick="sendMessage()">发送消息</button>
    <button onclick="closeConnection()">关闭连接</button>
    <p id="messages"></p>

    <script>
        var webSocket = null;

        function connect() {
            if ('WebSocket' in window) {
                webSocket = new WebSocket("ws://localhost:18801/webSocket");
                webSocket.onopen = function() {
                    console.log("已连接");
                };
                webSocket.onmessage = function(event) {
                    document.getElementById("messages").innerHTML += event.data + "<br>";
                };
                webSocket.onclose = function() {
                    console.log("连接已关闭");
                };
                webSocket.onerror = function() {
                    console.log("发生错误");
                };
            } else {
                alert("您的浏览器不支持 WebSocket！");
            }
        }

        function sendMessage() {
            if (webSocket) {
                webSocket.send("Hello, Server!");
            }
        }

        function closeConnection() {
            if (webSocket) {
                webSocket.close();
            }
        }
    </script>
</body>
</html>

4.2 后端代码示例（Spring Boot）

以下是一个简单的 Spring Boot WebSocket 服务端示例：

4.2.1 添加依赖

在 pom.xml 文件中添加 WebSocket 依赖：

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

4.2.2 配置 WebSocket

创建一个配置类 WebSocketConfig：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

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

4.2.3 创建 WebSocket 服务端类

创建一个 WebSocket 服务端类 WebSocketServer：

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

@ServerEndpoint("/webSocket")
@Component
public class WebSocketServer {
    private static final Logger log = LoggerFactory.getLogger(WebSocketServer.class);
    private static final CopyOnWriteArraySet<Session> sessionPools = new CopyOnWriteArraySet<>();

    @OnOpen
    public void onOpen(Session session) {
        sessionPools.add(session);
        log.info("新连接加入：" + session.getId());
    }

    @OnClose
    public void onClose(Session session) {
        sessionPools.remove(session);
        log.info("连接关闭：" + session.getId());
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("收到来自客户端的消息：" + message);
        for (Session sess : sessionPools) {
            if (sess.isOpen()) {
                try {
                    sess.getBasicRemote().sendText("服务器收到消息：" + message);
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }

    @OnError
    public void onError(Session session, Throwable throwable) {
        log.error("发生错误：" + throwable.getMessage());
    }
}