SpringBoot的WebSocket实现单聊群聊

最新推荐文章于 2024-01-14 07:15:00 发布

皮皮大虾

最新推荐文章于 2024-01-14 07:15:00 发布

阅读量219

点赞数

分类专栏：笔记 java 文章标签： websocket

本文链接：https://blog.csdn.net/coding_deliver/article/details/109568091

版权

java 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

笔记

12 篇文章 0 订阅

订阅专栏

说在开头

在HTTP协议中，所有的请求都是由客户端发送给服务端，然后服务端发送请求
要实现服务器向客户端推送消息有几种methods:

轮询
大量无效请求，浪费资源
长轮询
有新数据再推送，但这会导致连接超时，有一定隐患
Applet和Flash
过时，安全隐患，兼容性不好

消息群发

创建新项目:
添加依赖：

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>sockjs-client</artifactId>
            <version>1.1.2</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.3.1</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>stomp-websocket</artifactId>
            <version>2.3.3</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>webjars-locator-core</artifactId>
        </dependency>

创建WebSocket配置类:WebSocketConfig

@Configuration
@EnableWebSocketMessageBroker//注解开启webSocket消息代理
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    /**
     * 配置webSocket代理类
     * @param registry
     */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");      //代理消息的前缀
        registry.setApplicationDestinationPrefixes("/app");         //处理消息的方法前缀
    }
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/chat").withSockJS();         //定义一个/chat前缀的endpioint,用来连接
    }
}

创建Bean

/**
 * 群消息类
 */
public class Message {
    private String name;
    private String content;
//省略getter& setter
}

定义controller的方法:

    /**
     * MessageMapping接受前端发来的信息
     * SendTo 发送给信息WebSocket消息代理，进行广播
     * @param message 页面发来的json数据封装成自定义Bean
     * @return 返回的数据交给WebSocket进行广播
     * @throws Exception
     */
    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Message greeting(Message message) throws Exception {
        return message;
    }

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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>
        var stompClient = null;
        //点击连接以后的页面改变
        function setConnected(connection) {
            $("#connect").prop("disable",connection);
            $("#disconnect").prop("disable",!connection);
            if (connection) {
                $("#conversation").show();
                $("#chat").show();

            } else {
                $("#conversation").hide();
                $("#chat").hide();
            }
            $("#greetings").html("");
        }
        //点击连接按钮建立连接
        function connect() {
            //如果用户名为空直接跳出
            if (!$("#name").val()) {
                return;
            }
            //创建SockJs实例,建立连接
            var sockJS = new SockJS("/chat");
            //创建stomp实例进行发送连接
            stompClient = Stomp.over(sockJS);
            stompClient.connect({}, function (frame) {
                setConnected(true);
                //订阅服务端发来的信息
                stompClient.subscribe("/topic/greetings", function (greeting) {
                    //将消息转化为json格式，调用方法展示
                    showGreeting(JSON.parse(greeting.body));
                });
            });
        }
        //断开连接
        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();
            })
        })
    </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">断开连接</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>

私聊

既然是私聊，就要有对象目标，也是用户，可以用SpringSecurity引入
所以添加额外依赖：

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

配置SpringSecurity

@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    @Bean
    PasswordEncoder passwordEncoder(){
        return new BCryptPasswordEncoder();
    }
    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.inMemoryAuthentication()
                .withUser("panlijie").roles("admin").password("$2a$10$5Pf0KhCdnrpMxP5aRrHvMOsvV2fvfWJqk0SEDa9vQ8OWwV8emLFhi")
                .and()
                .withUser("suyanxia").roles("user").password("$2a$10$5Pf0KhCdnrpMxP5aRrHvMOsvV2fvfWJqk0SEDa9vQ8OWwV8emLFhi");
    }
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
                .anyRequest().authenticated()
                .and()
                .formLogin()
                .permitAll();
    }
}

在原来的WebSocketConfig配置类中修改：也就是多了一个代理消息前缀:"/queue"

@Configuration
@EnableWebSocketMessageBroker//注解开启webSocket消息代理
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    /**
     * 配置webSocket代理类
     * @param registry
     */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic","/queue");      //代理消息的前缀
        registry.setApplicationDestinationPrefixes("/app");         //处理消息的方法前缀
    }
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/chat").withSockJS();         //定义一个/chat前缀的endpioint,用来连接
    }
}

创建Bean:

public class Chat {
    private String to;
    private String from;
    private String content;
//省略getter& setter
}

添加controller方法：

    /**
     * 点对点发送信息
     * @param principal 当前用户的信息
     * @param chat 发送的信息
     */
    @MessageMapping("chat")
    public void chat(Principal principal, Chat chat) {
        //获取当前对象设置为信息源
        String from = principal.getName();
        chat.setFrom(from);
        //调用convertAndSendToUser("用户名","路径","内容");
        simpMessagingTemplate.convertAndSendToUser(chat.getTo(), "/queue/chat", chat);
    }

创建页面：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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>
        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();
            });
        });
    </script>
</head>
<body>
<div id="chat">
    <div id="chatsContent">
    </div>
    <div>
        请输入聊天内容
        <input type="text" id="content" placeholder="聊天内容">
        <input type="text" id="to" placeholder="目标用户">
        <button type="button" id="send">发送</button>
    </div>
</div>
</body>
</html>

暂结！

皮皮大虾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot的WebSocket实现单聊群聊

说在开头在HTTP协议中，所有的请求都是由客户端发送给服务端，然后服务端发送请求要实现服务器向客户端推送消息有几种methods:轮询大量无效请求，浪费资源长轮询有新数据再推送，但这会导致连接超时，有一定隐患Applet和Flash过时，安全隐患，兼容性不好消息群发创建新项目:添加依赖： <dependency> <groupId>org.springframework.boot</groupId>
复制链接

扫一扫

专栏目录