SpringBoot整合WebSocket

墨尘 88 0

一、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>

<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通信成功。

在这里插入图片描述


后台日志:

加粗样式






版权声明:本文为CSDN博主「NicholasGUB」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/Nicholas_GUB/article/details/121619014


标签: #Java #SpringBoot #WebSocket

  • 评论列表

留言评论