Spring Boot整合WebSocket

最新推荐文章于 2024-05-21 15:40:10 发布
最新推荐文章于 2024-05-21 15:40:10 发布
阅读量185 收藏
点赞数
分类专栏： Spring Boot 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s_zero/article/details/102585015
版权

一:消息群发

  1. 创建Spring Boot项目,并添加如下倚赖
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>webjars-locator-core</artifactId>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>sockjs-client</artifactId>
            <version>1.1.2</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>stomp-websocket</artifactId>
            <version>2.3.3</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.3.1</version>
        </dependency>
  1. 配置WebSocket
  • spring
    框架提供了基于websocket的STOMP支持,STOMP是一个简单的可互操作的协议,通常被用于服务器与客户端的异步消息传递
package org.sang.wschat.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker//开启WebSocket消息代理
//继承WebSocketMessageBrokerConfigurer进行WebSocket配置
public class WebSocketConfig
        implements WebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        //消息代理的前缀，即如果消息的前缀是/topic就会将消息转发给消息代理broker,
        //然后再由消息代理将消息转发给当前连接的客户端
        config.enableSimpleBroker("/topic");
        //即定义了前缀为/app的路径即可通过@MessageMapping注解的方法进行处理
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        //定义一个前缀为/chat的endPoint,并开启SockJS支持（可解决浏览器的兼容性）
        registry.addEndpoint("/chat").withSockJS();
    }
}
  1. 实体类
package org.sang.wschat.model;

public class Message {
    private String name;
    private String content;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}
  1. 定义一个Controller
 package org.sang.wschat.controller;

import org.sang.wschat.model.Chat;
import org.sang.wschat.model.Message;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;

import java.security.Principal;

@Controller
public class GreetingController {
    //根据配置下面被注解的方法将接受来自"/app/hello"路径发送来的消息，经方法处理后，
    //将消息转发到SentTo定义的路径上，再转发给消息代理，然后再广播给客户端
    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Message greeting(Message message) throws Exception {
        return message;
    }

}
  1. 界面构建
  • static目录下创建chat.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群聊</title>
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
    <script src="/app.js"></script>
</head>
<body>
<div>
    <label for="name">请输入用户名：</label>
    <input type="text" id="name" placeholder="用户名">
</div>
<div>
    <button id="connect" type="button">连接</button>
    <button id="disconnect" type="button" disabled="disabled">断开连接</button>
</div>
<div id="chat" style="display: none;">
    <div>
        <label for="name">请输入聊天内容：</label>
        <input type="text" id="content" placeholder="聊天内容">
    </div>
    <button id="send" type="button">发送</button>
    <div id="greetings">
        <div id="conversation" style="display: none">群聊进行中...</div>
    </div>
</div>
</body>
</html>
  • 其中除了app.js另外三个js是通过pom文件通过倚赖引进的,app.js如下
var stompClient = null;
function setConnected(connected) {
    $("#connect").prop("disabled", connected);
    $("#disconnect").prop("disabled", !connected);
    if (connected) {
        $("#conversation").show();
        $("#chat").show();
    }
    else {
        $("#conversation").hide();
        $("#chat").hide();
    }
    $("#greetings").html("");
}
/*表示创建一个webSocket连接，而建立连接时还必须先输入用户名*/
function connect() {
    if (!$("#name").val()) {
        return;
    }
    /*使用SockJS创建连接，然后创建一个Stomp实例发起连接*/
    var socket = new SockJS('/chat');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        setConnected(true);/*页面设置*/
        /*订阅服务端发回来的消息，并展示*/
        stompClient.subscribe('/topic/greetings', function (greeting) {
            showGreeting(JSON.parse(greeting.body));
        });
    });
}
/*断开一个webSocket连接*/
function disconnect() {
    if (stompClient !== null) {
        stompClient.disconnect();
    }
    setConnected(false);
}
function sendName() {
    stompClient.send("/app/hello",
        {},
        JSON.stringify({'name': $("#name").val(),'content':$("#content").val()}));
}
function showGreeting(message) {
    $("#greetings")
        .append("<div>" + message.name+":"+message.content + "</div>");
}

$(function () {
    $( "#connect" ).click(function() { connect(); });
    $( "#disconnect" ).click(function() { disconnect(); });
    $( "#send" ).click(function() { sendName(); });
});

6.测试

  • 启动项目访问http://localhost:8080/chat.html ,输入用户名连接,再启动其它浏览器,重复步骤即可实现群聊
    在这里插入图片描述
    在这里插入图片描述

二:消息点对点发送

  • 上面发送消息使用到了@SendTo注解,由由该注解处理过的方法转发给broker,再由broker进行消息广播,而spring还提供了SimpMessagingTemplate,可将该类直接注入Controlelr并代替@SendTo注解,而有了SimpMessagingTemplate的支持,可以在任意地方发送消息到broker,即点对点发送
  1. 继续添加倚赖
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
  1. 配置Spring Security,添加两个用户,并且所有地址都需认证后才能访问
package org.sang.wschat.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;

@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    @Bean
    PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.inMemoryAuthentication()
        .withUser("admin")
        .password("$2a$10$RMuFXGQ5AtH4wOvkUqyvuecpqUSeoxZYqilXzbz50dceRsga.WYiq")
        .roles("admin")
        .and()
        .withUser("sang")
        .password("$2a$10$RMuFXGQ5AtH4wOvkUqyvuecpqUSeoxZYqilXzbz50dceRsga.WYiq")
        .roles("user");
    }
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
                .anyRequest().authenticated()
                .and()
                .formLogin().permitAll();
    }
}
  1. 对WebSocketConfig中下面的这行进行改造,可以看到又增加了一个broker前缀"/queue",为了方便对不同类消息发送进行管理
        config.enableSimpleBroker("/topic","/queue");
  1. chat实体类
package org.sang.wschat.model;

public class Chat {
    private String to;
    private String from;
    private String content;

    public String getTo() {
        return to;
    }

    public void setTo(String to) {
        this.to = to;
    }

    public String getFrom() {
        return from;
    }

    public void setFrom(String from) {
        this.from = from;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}
  1. 向之前的Controller中添加一个注入和方法,即该点对点方法使用SimpMessagingTemplate 进行广播
    @Autowired
    SimpMessagingTemplate messagingTemplate;

    /**
     *
     * @param principal 登陆用户的信息
     * @param chat 客户端发来的消息
     */
    @MessageMapping("/chat")
    public void chat(Principal principal, Chat chat) {
        //获取当前用户的用户名，并设置给Chat的from属性
        String from = principal.getName();
        chat.setFrom(from);
        //发送消息
        messagingTemplate.convertAndSendToUser(chat.getTo(),
                "/queue/chat", chat);
    }
  1. 创建聊天界面onlinechat.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单聊</title>
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
    <script src="/chat.js"></script>
</head>
<body>
<div id="chat">
    <div id="chatsContent">
    </div>
    <div>
        请输入聊天内容：
        <input type="text" id="content" placeholder="聊天内容">
        目标用户：
        <input type="text" id="to" placeholder="目标用户">
        <button id="send" type="button">发送</button>
    </div>
</div>
</body>
</html>
  1. chat.js
var stompClient = null;
function connect() {
    var socket = new SockJS('/chat');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        stompClient.subscribe('/user/queue/chat', function (chat) {
            showGreeting(JSON.parse(chat.body));
        });
    });
}
function sendMsg() {
    stompClient.send("/app/chat", {},
        JSON.stringify({'content':$("#content").val(),
            'to':$("#to").val()}));
}
function showGreeting(message) {
    $("#chatsContent")
        .append("<div>" + message.from+":"+message.content + "</div>");
}
$(function () {
    connect();
    $( "#send" ).click(function() { sendMsg(); });
});
  • chat.js与前文的app.js主要有三处不同,一是订阅地址多了个"/user"前缀,这是因为SimpMessagingTemplate中自动添加了路径前缀; 二是聊天发送路径为"/app/chat"; 三是发送的消息内容中有一个to字段用来描述消息的目标用户
  1. 测试
  • 访问http://localhost:8080/onlinechat.html ,使用admin/123 ,sang/123进行登陆
    在这里插入图片描述
    在这里插入图片描述
洺润
关注
专栏目录
Spring Boot 整合WebSocket
weixin_44021967的博客
08-07 299
文章目录1.WebSocket介绍2.SpringBoot结合WebSocket11-03 在线私聊 1.WebSocket介绍 Spring Boot 结合 WebSocket 实现在线聊天:https://mp.weixin.qq.com/s/Rrj7oco3K8kJBsTxEEdz9g 2.SpringBoot结合WebSocket 群聊，不存在用户信息 依赖：web，socket web-jar：在SSM，想使用前端库也可以像依赖一样添加到 https://mvnrepository.com/ ht
SpringBoot+SpringSecurity+WebSocket
04-11
SpringBoot+SpringSecurity+WebSocket的整合Demo
SpringBoot+WebSocket--亲测可用
01-29
CSDN上的大部分我都下过了不能用，此SpringBoot 集成WebSocket ,亲测可用 支持jdk1.8,
SpringBoot使用WebSocket
qq_43595018的博客
01-02 1万+
1、WebSocket是一种在单个TCP连接上进行全双工通信的协议。2、WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。3、在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。示例：WebSocket是一种双向网络通信协议，与HTTP不同，它以ws://或wss://开头。
SpringBoot实现WebSocket
热门推荐
山不见我，我自见山
12-06 2万+
WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议） 它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的。
SpringBoot 集成 WebSocket
功不唐捐，玉汝于成
04-21 6171
SpringBoot 整合 websocket、websocket 的通信应用
Springboot整合Websocket
qq_45443475的博客
10-21 7561
Springboot整合Websocket
Spring boot整合websocket实现即时通讯
04-14
Spring boot整合websocket实现即时通讯。传统的HTTP协议，一般通过向服务器发送请求，拉取数据实现半双工通信，缺点是服务器难以直接向浏览器下发消息，因此，websocket协议应运而生，可用于向建立连接的浏览器主动...
spring boot整合WebSocket实现多人聊天室的实例
04-14
在本实例中，我们将探讨如何使用Spring Boot整合WebSocket和STOMP协议来实现一个多人聊天室。 首先，我们需要在Spring Boot项目中添加WebSocket的相关依赖。这通常包括`spring-websocket`和`spring-messaging`。在`...
Spring boot整合websocket实现即时通讯demo(适合新手或者开发人员学习)
06-27
本项目基于Spring平台，整合websocket协议，实现一个简易web聊天室的功能。主要特性如下: 1.包含聊天室登录、退出的功能。登录时，浏览器自动向服务器发起websocket连接，退出时自动切断。登录页面为...
SpringBoot整合WebSocket
Curtisjia的博客
10-29 213
目录添加依赖配置前端 添加依赖 <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-lang3</artifactId> <version>3.4</version> </dependency> <dependency> <groupId>com.alibaba<
详解在spring boot中消息推送系统设计与实现
08-26
主要介绍了详解在spring boot中消息推送系统设计与实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
SpringBoot集成WebSocket(实时消息推送)
总结分享
03-25 2872
WebSocket 允许服务器在没有收到请求的情况下主动向客户端发送数据，从而实现了更高效的实时通信。
在 Spring Boot 中整合、使用 WebSocket
Go_ahead_forever的博客
03-04 3269
WebSocket 是一种基于 TCP 协议的全双工通信协议，它允许客户端和服务器之间建立持久的、双向的通信连接。相比传统的 HTTP 请求 - 响应模式，WebSocket 提供了实时、低延迟的数据传输能力。通过 WebSocket，客户端和服务器可以在任意时间点互相发送消息，实现实时更新和即时通信的功能。WebSocket 协议经过了多个浏览器和服务器的支持，成为了现代 Web 应用中常用的通信协议之一。
SpringBoot 集成WebSocket广播模式
CatalpaFlat的博客
10-26 920
SpringBoot 集成WebSocket广播模式1.添加maven依赖<!--thymeleaf模板依赖--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <!--web依赖
webSocket介绍与使用 spring boot 集成 websocket教程 java
最新发布
a360284634的博客
05-21 3307
WebSocket介绍与使用 java spring boot集成WebSocket教程
Spring Boot 中使用 WebSocket
啦啦啦啦 la
06-23 486
Spring Boot 中使用 WebSocket WebSocket 是一种长连接技术，可以实现服务端和客户端的双向通信，服务端可以主动推送信息给客户端 构建应用 添加依赖 build.gradle dependencies { compile("org.springframework.boot:spring-boot-starter-websocket") compi...
SpringBoot中引入WebSocket
风萧水寒的博客
09-01 3838
SpringBoot中引入WebSocket 1、引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot
springboot整合webSocket 简单版
voidL123的博客
06-20 498
注意事项：security，拦截器、注册hander等可能导致webSocket访问不到 参考链接：https://blog.csdn.net/slt6366078/article/details/80360941 原文：https://blog.csdn.net/moshowgame/article/details/80275084；https://blog.csdn.net/a782705...
Spring Boot整合WebSocket实战教程
本文将详细阐述如何在Spring Boot项目中集成和使用WebSocket，提供实时通信功能。WebSocket是一种在TCP连接上实现全双工通信的Web协议，由IETF定义为RFC 6455标准，并由RFC7936补充。WebSocket简化了客户端和服务器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值