您的位置: 首页  >  文章  >  WebSocket广播通信

WebSocket广播通信

分类: 文章 • 2025-04-14 12:54:58

WebSocket为浏览器和服务端相互的通信功能，浏览器可以向服务端发送消息，服务端也可以向浏览器发送消息。WebSocket需要浏览器的支持，目前大多数主流的浏览器都是支持的。

添加依赖

<!-- spring boot tomcat jsp 支持开启 -->
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
        </dependency>
        <!--servlet支持开启-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

添加一个WebSocket的配置文件，代码如下

package org.websocket.demo;

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
public class WebScoketConfig implements WebSocketMessageBrokerConfigurer
{
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/servicekey").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
    }
}

 

如上所示，我们通过@EnableWebSocketMessageBroker注解开启使用STOMP协议来传输消息，并且实现了registerStompEndpoints方法添加了对应的STOMP使用SockJS协议。接下来我们配置两个实体用于浏览器与服务器端的通信交互。

我们创建2个简单的实体类,用来定义我们的消息主体，代码如下

package org.websocket.demo;


public class MessageBean {
    private String mymessage;

    public String getMymessage() {
        return mymessage;
    }

    public void setMymessage(String mymessage) {
        this.mymessage = mymessage;
    }
}

package org.websocket.demo;

public class ReponseMessage {
    private String responseMessage;

    public ReponseMessage(String responseMessage) {
        this.responseMessage = responseMessage;
    }

    public String getResponseMessage() {
        return responseMessage;
    }

    public void setResponseMessage(String responseMessage) {
        this.responseMessage = responseMessage;
    }
}

第一个用来接收web向服务器传递的消息，第二个用来接收定义服务器向web发送的消息

创建一个WebSocket的控制器，代码如下

package org.websocket.demo;

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class WebSocketController {
    @MessageMapping("/welcome")
    @SendTo("/topic/getMessage")
    public ReponseMessage test(MessageBean message)
    {
        return new ReponseMessage("webScoket消息："+message.getMymessage());
    }
}

@MessageMapping：消息映射地址，类似@RequestMapping，当服务端有消息存在时，会对订阅@SendTo中路径的浏览器发送请求。接下来我们添加一个Jsp页面来配置WebSocket的JS使用方式。

 

先修改配置文件，增加jsp支持

spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

这里还需要下载三个js文件，jquery.min.js、sockjs.min.js、stomp.min.js，放在static目录下，这是spring为我们提供的默认静态资源目录，如下所示

WebSocket广播通信

添加webapp文件夹，结构如下

WebSocket广播通信

添加简单的一个jsp文件，代码如下

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>WebScoket广播通信</title>
    <script src="/sockjs.min.js"></script>
    <script src="/stomp.min.js"></script>
    <script src="/jquery.min.js"></script>
</head>
<body onload="disconnect()">
    <button id="connect" onclick="connect()">连接</button>
    <button id="disconnect" onclick="disconnect()" disabled="disabled">断开</button><br/>
    <div id="inputDiv">
        输入消息内容：<input type="text" id="message"/><br/>
        <button id="send" onclick="send()">发送</button><br/>
        <p id="response"></p>
    </div>
    <script>
        var stompClient = null;
        //设置连接状态控制显示隐藏
        function setConnected(connected)
        {
            $("#connect").attr("disabled",connected);
            $("#disconnect").attr("disabled",!connected);
            if(!connected) {
                $("#inputDiv").hide();
            }else{
                $("#inputDiv").show();
            }
            $("#reponse").html("");
        }
        //连接
        function connect()
        {
            var socket = new SockJS("/servicekey");
            stompClient = Stomp.over(socket);
            stompClient.connect({},function (frame) {
                setConnected(true);
                stompClient.subscribe("/topic/getMessage",function (response) {
                    showResponse(JSON.parse(response.body).responseMessage);
                })
            })
        }
        //断开连接
        function disconnect(){
            if(stompClient!=null)
            {
                stompClient.disconnect();
            }
            setConnected(false);
        }
        //发送名称到后台
        function send(){
            var message = $("#message").val();
            stompClient.send("/welcome",{},JSON.stringify({'mymessage':message}));
        }
        //显示socket返回消息内容
        function showResponse(message)
        {
            $("#response").html(message);
        }
    </script>
</body>
</html>

在创建一个映射文件，将我们的额index.jsp映射出去，代码如下

package org.websocket.demo;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;


@Configuration
public class WebConfig implements WebMvcConfigurer
{
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/index").setViewName("/index");
    }
}

这样的话我们一个简单的WebSocket广播通信就完成了，我们来试一下，启动项目，输入http://127.0.0.1:8080/index

WebSocket广播通信

点击连接，与服务器建立通信通道

WebSocket广播通信

输入我们要向服务器发送的消息

WebSocket广播通信

我们在打开一个浏览器，输入消息

WebSocket广播通信

从图中我们可以看出，我们既可以向服务器发送消息，服务器也可以主动向我们发送消息

o(*≧▽≦)ツ┏━┓

o(*≧▽≦)ツ┏━┓

o(*≧▽≦)ツ┏━┓

源码地址：https://gitee.com/ww2510095/springboot_learning

 

 

 

相关推荐