WebSocket学习笔记

1、简介

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

2、开始使用

依赖

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

配置

@Configuration
public class WebSocketConfig  {
    /**
     * ServerEndpointExporter作用
     * 这个Bean会自动注册使用@ServerEndpoint注解声明的websocket endpoint
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
    
}

实现
@Component
@ServerEndpoint(“/websocket”) //表示前端接口
public class WebSocketImpl {

@OnOpen表示连接成功调用的方法

@OnClose表示连接关闭调用的方法

@OnMessage表示收到客户端消息后调用的方法

@OnError 表示发生错误时调用
…
}

举例：

    /**
     * 连接建立成功调用的方法
     */
@OnOpen
public void onOpen(Session session, EndpointConfig endpointConfig) throws IOException {
    System.out.println("欢迎新用户！");
    // 加入连接
    this.session = session;
    webSocketSet.add(this);
    // 更新在线人数
    updateOnlineCount();
    // 加载历史聊天记录
    ChatRecordDTO chatRecordDTO = listChartRecords(endpointConfig);
    // 发送消息
    WebsocketMessageDTO messageDTO = WebsocketMessageDTO.builder()
            .type(HISTORY_RECORD.getType())
            .data(chatRecordDTO)
            .build();
    synchronized (session) {
        session.getBasicRemote().sendText(JSON.toJSONString(messageDTO));
    }
}
 

/**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() throws IOException {
        // 更新在线人数
        webSocketSet.remove(this);
        updateOnlineCount();
    }

/**
 * 收到客户端消息后调用的方法
 * message是json格式的数据类型，可转化为一个WebsocketMessageDTO对象
 *
 * @param message 客户端发送过来的消息
 */
@OnMessage
public void onMessage(String message, Session session) throws IOException {
    WebsocketMessageDTO messageDTO = JSON.parseObject(message, WebsocketMessageDTO.class);
    switch (Objects.requireNonNull(getChatType(messageDTO.getType()))) { //Type这个数据哪来的
        case SEND_MESSAGE:
            // 发送消息
            ChatRecord chatRecord = JSON.parseObject(JSON.toJSONString(messageDTO.getData()), ChatRecord.class);
            chatRecordDao.insert(chatRecord);
            messageDTO.setData(chatRecord);
            for (WebSocketServiceImpl webSocketService : webSocketSet) {
                synchronized (webSocketService.session) {
                    webSocketService.session.getBasicRemote().sendText(JSON.toJSONString(messageDTO));
                }
            }
            break;
        case RECALL_MESSAGE:
            // 撤回消息
            RecallMessageDTO recallMessage = JSON.parseObject(JSON.toJSONString(messageDTO.getData()), RecallMessageDTO.class);
            // 删除记录
            deleteRecord(recallMessage.getId());
            for (WebSocketServiceImpl webSocketService : webSocketSet) {
                synchronized (webSocketService.session) {
                    webSocketService.session.getBasicRemote().sendText(JSON.toJSONString(messageDTO));
                }
            }
            break;
        case HEART_BEAT:
            // 心跳消息
            messageDTO.setData("pong");
            session.getBasicRemote().sendText(JSON.toJSONString(JSON.toJSONString(messageDTO)));
        default:
            break;
    }

}

/**
 * 发生错误时调用
 */
@OnError
public void onError(Session session, Throwable error) {
    error.printStackTrace();
}

前端建立连接并发送消息

this.websocket = new WebSocket("ws://localhost:8088/websocket");
this.websocket.send(JSON.stringify(beatMessage));