一、WebSocket与Http的区别

HTTP是应用层上的一个单向的、无状态的、基于请求与响应的协议。http协议本身是没有持久通信能力的，当客户端向服务器发送HTTP请求时，接收到请求后，服务器会将响应发送给客户端。每个请求都与一个对应的响应相关联，在发送响应后客户端与服务器的连接会被关闭。这种的基于请求响应的通讯方式有一点不足，服务器端无法主动向客户端推送数据。

Websocket是应用层上的一个全双工的有状态协议。websocket以ws://或wss://开头，它必须依赖 HTTP 协议进行一次握手，握手成功后，数据就直接从 TCP 通道传输，与 HTTP 无关了。

与HTTP协议不同，websocket是长连接模式，连接后客户端和服务器之间的连接将保持活动状态，直到被任何一方终止。在通过客户端和服务器中的任何一方关闭连接之后，连接将从两端终止。这种模式的缺点是连接会持续占用服务器资源，可以采用心跳机制检测当前连接是否存在数据传输，如果没有数据传输，先关闭连接以节约服务器资源。

二、搭建Websocket服务端

1.导入websocket依赖。

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

2.编写websocket配置类。

package com.it.config;

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

@Configuration
@EnableWebSocket // 启用websocket
public class WebSocketConfig {

	@Bean
    public ServerEndpointExporter getServerEndpointExporter() { //服务终端
        return new ServerEndpointExporter();
    }
}

WebSocket是基于事件的方式实现的通讯操作，javax.websocket包下提供了许多事件注解。

No	注解	作用
1	@ServerEndpoint	声明一个WebSocket操作终端
1	@PathParam	接收客户端请求路径参数
1	@OnOpen	监听WebSocket连接打开事件
1	@OnClose	监听WebSocket连接关闭事件
1	@OnMessage	监听WebSocket接收到消息事件
1	@OnError	监听WebSocket方法出错事件

编写WebSocket处理类。

package com.it.handle;

import io.micrometer.core.instrument.util.StringUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Objects;

@Slf4j
@Component
@ServerEndpoint("/websocket/{token}") // 提供给客户端一个操作终端
public class WebSocketHandler {

    @OnOpen
    public void handleOpen(Session session, @PathParam("token") String token) {
        if (StringUtils.isEmpty(token)) {
            sendMessage(session, "[websocket ERROR] 客户端Token错误，连接失败");
        }
        log.info("[websocket]客户端创建连接，session ID = {} ", session.getId());
    }

    @OnClose
    public void handleClose(Session session) {
        log.info("[websocket]客户端断开websocket连接，session ID = {} ", session.getId());
    }

    @OnError
    public void handleError(Session session, Throwable throwable) {
        log.info("[websocket]出现错误，session ID = {} ", session.getId());
        log.info("[websocket]出现错误，throwable = {} ", throwable);
    }

    @OnMessage
    public void handleMessage(Session session, String message) {
        log.info("[websocket]用户发送请求，session ID = {}, message = {}", session.getId(), message);
        sendMessage(session, "[ECHO]" + message);
    }

    // 发送数据到客户端
    private void sendMessage(Session session, String message) {
        if (Objects.isNull(session)) {
            return;
        }
        synchronized (session) { // 同步发送
            try {
                session.getBasicRemote().sendText(message); // 发送数据
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

三、搭建Websocket客户端

WebSocket默认支持跨域访问，客户端可以搭建在其它项目中(button-classic.css)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket</title>
    <style type="text/css"> input { outline-style: none ; border: 1px solid #ccc; border-radius: 3px; padding: 13px 14px; width: 400px; font-size: 14px; font-weight: 700; font-family: "Microsoft soft"; } #echo-div{ width: 650px; height: 300px; padding: 20px; background-color: #eee; margin-top:10px; } </style>
    <link rel="stylesheet" type="text/css" href="./css/button-classic.css" />
    <script type="text/javascript" > window.onload = function() { const url = 'ws://localhost:8080/websocket/test-token'; let websocket = new WebSocket(url); websocket.onopen = function(event) { document.getElementById('echo-div').innerHTML += '<p>服务器连接成功</p>' } websocket.onclose = function(event) { document.getElementById('echo-div').innerHTML += '<p>服务器连接关闭...</p>' } websocket.onmessage = function(obj) { document.getElementById('echo-div').innerHTML += '<p>' + obj.data + '</p>' document.getElementById('message').value = ''; } document.getElementById('send-btn').addEventListener('click', function(e) { let message = document.getElementById('message').value; websocket.send(message); }) document.getElementById('close-btn').addEventListener('click', function(e) { websocket.close(); }) } </script>
</head>
<body>
<div>
    <span>信息：</span>
    <input id="message" type="text" />
    <button id="send-btn" class="button orange" >发送</button>
    <button id="close-btn" class="button black" >关闭</button>
</div>
<div id="echo-div"></div>
</body>
</html>

启动前端项目，访问编写的websocket页面进行简单测试，websocket通信成功。

后台日志：

SpringBoot整合WebSocket

一、WebSocket与Http的区别

二、搭建Websocket服务端

三、搭建Websocket客户端

相关文章

热门标签

最新文章

目录