SpringBoot之WebSocket练习

最新推荐文章于 2024-04-10 06:22:13 发布

r8l8q8

最新推荐文章于 2024-04-10 06:22:13 发布

阅读量354

点赞数

分类专栏： SpringBoot 文章标签： websocket idea

本文链接：https://blog.csdn.net/r8l8q8/article/details/76408205

版权

SpringBoot 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

准备：
IDE:Intelijj IDEA
所需js:sockjs.min.js(SockJS的客户端脚本）+stomp.min.js（STOMP协议的客户端脚本）
stomp.min.js:https://github.com/plusjade/jekyll-bootstrap.git
sockjs.min.js:https://github.com/sockjs/sockjs-client.git
开始：
idea下新建 Spring Initializr项目，勾选Web+Thymlead+Websocket依赖。
项目结构如下图所示：

（1）新建WebSocket的配置类-WebSocketConfig，需要在配置类上使用@Configuration
@EnableWebSocketMessageBroker
注解，其中@EnableWebSocketMessageBroker用来开启WebSocket支持。代码如下：

package com.example.demo.config;

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

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    @Override
    //注册STOMP协议的节点,并映射到指定的url
    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
        //注册一个STOMP的endpoint，并指定使用SockJS协议
        stompEndpointRegistry.addEndpoint("/endpoint").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        //配置消息代理（Message Broker)
//        super.configureMessageBroker(registry);
        registry.enableSimpleBroker("/topic");
    }
}

（2）新建消息类-Message，接受来自浏览器的消息，代码如下：

package com.example.demo.bean;
//用作接受浏览器消息的参数，用次类接收来自浏览器的消息
public class Message {
    private String name;
    public String getName() {
        return name;
    }
}

（3)SocketResponse

package com.example.demo.bean;

public class SocketResponse {
    private String responseMessage;
    public SocketResponse(String responseMessage){
        this.responseMessage=responseMessage;
    }

    public String getResponseMessage() {
        return responseMessage;
    }
}

（4）ScoketController

package com.example.demo.controller;

import com.example.demo.bean.SocketResponse;
import com.example.demo.bean.Message;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class SocketController {
    @MessageMapping("/welcome")
    @SendTo("/topic/getResponse")
    public SocketResponse say(Message msg) throws Exception{
        Thread.sleep(3000);
        return  new SocketResponse("Welcome,"+msg.getName()+"!");
    }
}

ws.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body onload="disconnect()">
<noscript><h2 style="color:#ff0000">貌似你的浏览器不支持websocket</h2> </noscript>
<div>
    <div>
        <button id="connect" onclick="connect();">连接</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
    </div>
    <div id="conversationDiv">
        <label>输入你的名字</label><input type="text" id="name"/>
        <button id="sendName" onclick="sendName();">发送</button>
    <p id="response"></p>
    </div>
</div>
<script th:src="@{sockjs.min.js}"></script>
<script th:src="@{stomp.min.js}"></script>
<script th:src="@{jquery-3.2.1.min.js}"></script>
<script type="text/javascript">
    var stompClient=null;
    function setConnected(connected) {
        document.getElementById('connect').disabled=connected;
        document.getElementById('disconnect').disabled=!connected;
        document.getElementById('conversationDiv').style.visibility=connected?'visible':'hidden'
        $('response').html();
    }
    function connect() {
        var socket=new SockJS('/endpoint');//连接SockJS的endpoint名称为”/endpoint"
        stompClient=Stomp.over(socket);//使用STOMP子协议的WebSocket客户端
        stompClient.connect({},function (frame) {//连接WebSocket服务端
            setConnected(true);
            console.log('Connected:'+frame);
            stompClient.subscribe('/topic/getResponse',function (response) {
                //通过stompClient.subscribe订阅/topic/getResponse目标发送的消息，这个是在控制器的@SendTO中定义的
                showResponse(JSON.parse(response.body).responseMessage);
            })
        })
    }
    function disconnect() {
        if(stompClient!=null){
            stompClient.disconnect();
        }
        setConnected(false);
        console.log('Disconnected');
    }
    function sendName() {
        var name=$("#name").val();
       // alert(name);
        //通过stompClient.send向/welcome目标发送消息，这个实在控制器@MessageMapping中定义的
        stompClient.send("/welcome",{},JSON.stringify({'name':name}));
    }
    function showResponse(message) {
        var response=$("#response");
        response.html(message);
    }
</script>
</body>
</html>

（7）WebMvcConfig

package com.example.demo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter{
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
//        super.addViewControllers(registry);
        registry.addViewController("/ws").setViewName("/ws");
    }
}

（8）运行结果
这里写图片描述

r8l8q8

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot之WebSocket练习

准备： IDE:Intelijj IDEA 所需js:sockjs.min.js(SockJS的客户端脚本）+stomp.min.js（STOMP协议的客户端脚本） stomp.min.js:https://github.com/plusjade/jekyll-bootstrap.git sockjs.min.js:https://github.com/sockjs/sockjs-clien
复制链接

扫一扫