Spring Boot整合WebSocket实现实时通信,前端实时通信,前后端实时通信

本文详细介绍了如何在SpringBoot中利用jakarta.websocket包下的WebSocketAPI实现一个简单的实时通信服务,包括环境准备、添加依赖、开发ServerEndpoint端点、配置WebSocket以及前端集成测试。
摘要由CSDN通过智能技术生成

Spring Boot整合WebSocket实现实时通信

实时通信在现代Web应用中扮演着越来越重要的角色,无论是在线聊天、股票价格更新还是实时通知,WebSocket都是实现这些功能的关键技术之一。Spring Boot作为一个简化企业级应用开发的框架,其对WebSocket的支持也非常友好。本文将详细介绍如何在Spring Boot中整合WebSocket,实现一个简单的实时通信服务。

引言

在 Spring Boot 中使用 WebSocket 有 2 种方式。第 1 种是使用由 Jakarta EE 规范提供的 Api,也就是 jakarta.websocket 包下的接口。第 2 种是使用 spring 提供的支持,也就是 spring-websocket 模块。前者是一种独立于框架的技术规范,而后者是 Spring 生态系统的一部分,可以与其他 Spring 模块(如 Spring MVC、Spring Security)无缝集成,共享其配置和功能。因为是进行学习进行使用webSocket所以进行选择第一种方式来进行实现.

本文将使用第 1 种方式,也就是使用 jakarta.websocket 来开发 WebSocket 应用。

1. 环境准备

  • JDK 1.8 或更高版本
  • Spring Boot 2.x
  • IntelliJ IDEA / Eclipse (或其他Java IDE)
  • Maven 或 Gradle 作为构建工具
  • springboot版本:3.2.5

2. 添加依赖

打开pom.xml文件,并添加WebSocket相关的依赖.

<!--实时通信webSocket依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

3. 开发 ServerEndpoint 端点

ServerEndpoint是一个注解,用于定义WebSocket服务器端点。使用这个注解,你可以指定WebSocket的URL模式,以便客户端能够连接到你的服务.

package com.fs.webSocket;

import jakarta.websocket.*;
import jakarta.websocket.server.ServerEndpoint;

// 这个和Controller的作用是类似的
@ServerEndpoint(value = "/websocket") // 此类是一个webSocket端点 服务端,监听/websocket的路径
public class MyServerEndpoint {
    // 定义一个Session对象
    private Session session;
    // 客户端与服务端建立连接触发
    @OnOpen
    public void onOpen(Session session) {
        // 保存session
        this.session = session;
        System.out.println("websocket连接成功");
    }
    // 客户端向服务端发送消息
    @OnMessage
    public void onMessage(String message) {
        System.out.println("收到客户端消息:" + message);
    }

    // 客户端服务端连接异常触发
    @OnError
    public void onError(Session session, Throwable error) {
        System.out.println("websocket连接异常");
    }

    // 客户端与服务端断开连接触发
    @OnClose
    public void onClose(Session session) {
        System.out.println("websocket连接关闭");
    }

}

注意:所有事件方法,都支持使用 Session 作为参数,表示当前连接参数。但是为了更加方便,我们在 @OnOpen 事件中直接把 Session 存储到了当前对象中,可以在任意方法中使用 this 访问。服务器会为每个连接创建一个端点对象,所以这是线程安全的。

4. 配置webSocket

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        ServerEndpointExporter exporter = new ServerEndpointExporter();
        exporter.setAnnotatedEndpointClasses(MyServerEndpoint.class); // 进行手动注册webSocket端点
        return exporter;
    }
}

当然也可以在MyServerEndpoint这个类上面进行添加 @Component注解,Spring 自动扫描,这样的话不需要手动调用 setAnnotatedEndpointClasses 方法进行注册。

5.前端集成测试

在资源文件夹resorces/static/index.html中书写一个简单的前端websocket进行连接到服务器通信,

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket</title>
</head>
<body>
<script type="text/javascript">
    let websocket = new WebSocket("ws://localhost:8080/websocket");

    // 连接断开
    websocket.onclose = e => {
        console.log(`连接关闭: code=${e.code}, reason=${e.reason}`)
    }
    // 收到消息
    websocket.onmessage = e => {
        console.log(`收到消息:${e.data}`);
    }
    // 异常
    websocket.onerror = e => {
        console.log("连接异常")
        console.error(e)
    }
    // 连接打开
    websocket.onopen = e => {
        console.log("连接打开");

        // 创建连接后,往服务器连续写入3条消息
        websocket.send("sprigdoc.cn");
        websocket.send("sprigdoc.cn");
        websocket.send("sprigdoc.cn");

        // 最后发送 bye,由服务器断开连接
        websocket.send("bye");

        // 也可以由客户端主动断开
        // websocket.close();
    }
</script>
</body>
</html>

启动应用,打开浏览器(先打开控制台),然后访问 http://localhost:8080/,查看控制台服务端输出的日志:

websocket连接成功
收到客户端消息:sprigdoc.cn
收到客户端消息:sprigdoc.cn
收到客户端消息:sprigdoc.cn
收到客户端消息:bye

此时代表连接成功!!!

结语

通过以上步骤,我们已经创建了一个简单的Spring Boot WebSocket的连接。展示了如何使用Spring Boot和WebSocket实现实时通信的基础。在实际项目中,你可能需要考虑更多的因素,如安全性、连接管理、广播优化等。

希望这篇教程能够帮助你开始探索Spring Boot与WebSocket的整合。如果你有任何疑问或建议,请在评论区告诉我。祝你编程愉快!

附录

  • Spring Boot官方文档: https://docs.spring.io/spring-boot/docs/current/reference/html/websocket.html
  • WebSocket协议规范: https://tools.ietf.org/html/rfc6455
  • 10
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
首先,你需要安装 channels 库。可以使用 pip 安装: ``` pip install channels ``` 然后,你需要在 Django 项目中添加 Channels 的配置。在 settings.py 中添加以下内容: ```python INSTALLED_APPS = [ # ... 'channels', ] ASGI_APPLICATION = 'your_project_name.routing.application' CHANNEL_LAYERS = { 'default': { 'BACKEND': 'channels_redis.core.RedisChannelLayer', 'CONFIG': { "hosts": [("127.0.0.1", 6379)], }, }, } ``` 接着,你需要创建一个路由文件。在项目根目录下创建一个 routing.py 文件,添加以下内容: ```python from channels.routing import ProtocolTypeRouter, URLRouter from django.urls import path application = ProtocolTypeRouter({ "websocket": URLRouter([ path("ws/your_url/", your_consumer), ]), }) ``` 其中,your_consumer 是你自定义的 consumer,后面会讲到。 现在,你需要创建 consumer。在你的应用下创建一个 consumers.py 文件,添加以下内容: ```python import json from channels.generic.websocket import AsyncWebsocketConsumer class YourConsumer(AsyncWebsocketConsumer): async def connect(self): await self.accept() async def disconnect(self, close_code): pass async def receive(self, text_data): data = json.loads(text_data) message = data['message'] await self.send(text_data=json.dumps({ 'message': message })) ``` 这个 consumer 是非常简单的,只是将收到的消息原样返回。你可以根据需要自定义它。 最后,你需要在你的模板中添加 WebSocket 连接。例如: ```javascript var socket = new WebSocket('ws://localhost:8000/ws/your_url/'); socket.onmessage = function(e) { var data = JSON.parse(e.data); console.log(data.message); } socket.onclose = function(e) { console.error('WebSocket closed unexpectedly'); }; ``` 这样,就可以在前后端之间实现实时通信了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值