maven依赖

  1. <dependency>
  2.     <groupId>org.springframework.boot</groupId>
  3.     <artifactId>spring-boot-starter-websocket</artifactId>
  4. </dependency>

常量类

  1. //webSocket相关配置
  2. //链接地址
  3. public static String WEBSOCKETPATHPERFIX = "/ws-push";
  4. public static String WEBSOCKETPATH = "/endpointWisely";
  5. //消息代理路径
  6. public static String WEBSOCKETBROADCASTPATH = "/topic";
  7. //前端发送给服务端请求地址
  8. public static final String FORETOSERVERPATH = "/welcome";
  9. //服务端生产地址,客户端订阅此地址以接收服务端生产的消息
  10. public static final String PRODUCERPATH = "/topic/getResponse";
  11. //点对点消息推送地址前缀
  12. public static final String P2PPUSHBASEPATH = "/user";
  13. //点对点消息推送地址后缀,最后的地址为/user/用户识别码/msg
  14. public static final String P2PPUSHPATH = "/msg";

接收前端消息实体

  1. public class WiselyMessage {
  2.     private String name;
  3.  
  4.     public String getName() {
  5.         return name;
  6.     }
  7.  
  8.     public void setName(String name) {
  9.         this.name = name;
  10.     }
  11. }

后台发送消息实体

  1. private String responseMessage;
  2.  
  3. public WiselyResponse(String responseMessage){
  4.     this.responseMessage = responseMessage;
  5. }
  6.  
  7. public String getResponseMessage() {
  8.     return responseMessage;
  9. }
  10.  
  11. public void setResponseMessage(String responseMessage) {
  12.     this.responseMessage = responseMessage;
  13. }

配置websocket

  1. @Configuration
  2. // @EnableWebSocketMessageBroker注解用于开启使用STOMP协议来传输基于代理（MessageBroker）的消息，这时候控制器（controller）
  3. // 开始支持@MessageMapping,就像是使用@requestMapping一样。
  4. @EnableWebSocketMessageBroker
  5. public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
  6.  
  7.     @Override
  8.     public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
  9.         //注册一个Stomp的节点（endpoint）,并指定使用SockJS协议。
  10.         stompEndpointRegistry.addEndpoint(Constant.WEBSOCKETPATH).withSockJS();
  11.     }
  12.  
  13.     @Override
  14.     public void configureMessageBroker(MessageBrokerRegistry registry) {
  15.         //服务端发送消息给客户端的域,多个用逗号隔开
  16.         registry.enableSimpleBroker(Constant.WEBSOCKETBROADCASTPATH, Constant.P2PPUSHBASEPATH);
  17.         //定义一对一推送的时候前缀
  18.         registry.setUserDestinationPrefix(Constant.P2PPUSHBASEPATH);
  19.         //定义websoket前缀
  20.         registry.setApplicationDestinationPrefixes(Constant.WEBSOCKETPATHPERFIX);
  21.     }
  22. }

service

  1. @Service
  2. public class WebSocketService {
  3.  
  4.     @Autowired
  5.     private SimpMessagingTemplate template;
  6.  
  7.     /**
  8.      * 广播
  9.      * 发给所有在线用户
  10.      *
  11.      * @param msg
  12.      */
  13.     public void sendMsg(WiselyResponse msg) {
  14.         template.convertAndSend(Constant.PRODUCERPATH, msg);
  15.     }
  16.  
  17.     /**
  18.      * 发送给指定用户
  19.      * @param users
  20.      * @param msg
  21.      */
  22.     public void send2Users(List<String> users, WiselyResponse msg) {
  23.         users.forEach(userName -> {
  24.             template.convertAndSendToUser(userName, Constant.P2PPUSHPATH, msg);
  25.         });
  26.     }
  27. }

控制器

  1. @Controller
  2. public class WsController {
  3.  
  4.     @Resource
  5.     WebSocketService webSocketService;
  6.  
  7.     @MessageMapping(Constant.FORETOSERVERPATH)//@MessageMapping和@RequestMapping功能类似，用于设置URL映射地址，浏览器向服务器发起请求，需要通过该地址。
  8.     @SendTo(Constant.PRODUCERPATH)//如果服务器接受到了消息，就会对订阅了@SendTo括号中的地址传送消息。
  9.     public WiselyResponse say(WiselyMessage message) throws Exception {
  10.         List<String> users = Lists.newArrayList();
  11.         users.add("d892bf12bf7d11e793b69c5c8e6f60fb");//此处写死只是为了方便测试,此值需要对应页面中订阅个人消息的userId
  12.         webSocketService.send2Users(users, new WiselyResponse("admin hello"));
  13.  
  14.         return new WiselyResponse("Welcome, " + message.getName() + "!");
  15.     }
  16. }

页面

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>Spring Boot+WebSocket+广播式</title>
  6.  
  7. </head>
  8. <body onload="disconnect()">
  9. <noscript><h2 style="color: #ff0000">貌似你的浏览器不支持websocket</h2></noscript>
  10. <div>
  11.     <div>
  12.         <button id="connect" onclick="connect();">连接</button>
  13.         <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
  14.     </div>
  15.     <div id="conversationDiv">
  16.         <label>输入你的名字</label><input type="text" id="name" />
  17.         <button id="sendName" onclick="sendName();">发送</button>
  18.         <p id="response"></p>
  19.         <p id="response1"></p>
  20.     </div>
  21. </div>
  22. <!--<script th:src="@{sockjs.min.js}"></script>
  23. <script th:src="@{stomp.min.js}"></script>
  24. <script th:src="@{jquery.js}"></script>-->
  25. <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
  26. <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
  27. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  28. <script th:inline="javascript">
  29.     var stompClient = null;
  30.     //此值有服务端传递给前端,实现方式没有要求
  31.     var userId = [[${userId}]];
  32.  
  33.     function setConnected(connected) {
  34.         document.getElementById('connect').disabled = connected;
  35.         document.getElementById('disconnect').disabled = !connected;
  36.         document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
  37.         $('#response').html();
  38.     }
  39.  
  40.     function connect() {
  41.         var socket = new SockJS('/endpointWisely'); //1连接SockJS的endpoint是“endpointWisely”，与后台代码中注册的endpoint要一样。
  42.         stompClient = Stomp.over(socket);//2创建STOMP协议的webSocket客户端。
  43.         stompClient.connect({}, function(frame) {//3连接webSocket的服务端。
  44.             setConnected(true);
  45.             console.log('开始进行连接Connected: ' + frame);
  46.             //4通过stompClient.subscribe（）订阅服务器的目标是'/topic/getResponse'发送过来的地址，与@SendTo中的地址对应。
  47.             stompClient.subscribe('/topic/getResponse', function(respnose){
  48.                 showResponse(JSON.parse(respnose.body).responseMessage);
  49.             });
  50.             //4通过stompClient.subscribe（）订阅服务器的目标是'/user/' + userId + '/msg'接收一对一的推送消息,其中userId由服务端传递过来,用于表示唯一的用户,通过此值将消息精确推送给一个用户
  51.             stompClient.subscribe('/user/' + userId + '/msg', function(respnose){
  52.                 console.log(respnose);
  53.                 showResponse1(JSON.parse(respnose.body).responseMessage);
  54.             });
  55.         });
  56.     }
  57.  
  58.     function disconnect() {
  59.         if (stompClient != null) {
  60.             stompClient.disconnect();
  61.         }
  62.         setConnected(false);
  63.         console.log("Disconnected");
  64.     }
  65.  
  66.     function sendName() {
  67.         var name = $('#name').val();
  68.         //通过stompClient.send（）向地址为"/welcome"的服务器地址发起请求，与@MessageMapping里的地址对应。因为我们配置了registry.setApplicationDestinationPrefixes(Constant.WEBSOCKETPATHPERFIX);所以需要增加前缀/ws-push/
  69.         stompClient.send("/ws-push/welcome", {}, JSON.stringify({ 'name': name }));
  70.     }
  71.  
  72.     function showResponse(message) {
  73.         var response = $("#response");
  74.         response.html(message);
  75.     }
  76.     function showResponse1(message) {
  77.         var response = $("#response1");
  78.         response.html(message);
  79.     }
  80. </script>
  81. </body>
  82. </html>

springboot整合websocket实现一对一消息推送和广播消息推送的更多相关文章

  1. Springboot整合Websocket遇到的坑

    Springboot整合Websocket遇到的坑 一.使用Springboot内嵌的tomcat启动websocket 1.添加ServerEndpointExporter配置bean @Confi ...

  2. SpringBoot 整合 WebSocket

    SpringBoot 整合 WebSocket(topic广播) 1.什么是WebSocket WebSocket为游览器和服务器提供了双工异步通信的功能,即游览器可以向服务器发送消息,服务器也可以向 ...

  3. SpringBoot整合websocket简单示例

    依赖 <!-- springboot整合websocket --> <dependency> <groupId>org.springframework.boot&l ...

  4. springboot整合websocket原生版

    目录 HTTP缺点 HTTP websocket区别 websocket原理 使用场景 springboot整合websocket 环境准备 客户端连接 加入战队 微信公众号 主题 HTTP请求用于我 ...

  5. SpringBoot整合WebSocket实现前后端互推消息

    小编写这篇文章是为了记录实现WebSocket的过程,受不了啰嗦的同学可以直接看代码. 前段时间做项目时设计了一个广播的场景,具体业务不再赘述,最终要实现的效果就是平台接收到的信息实时发布给所有的用户 ...

  6. WebSocket的简单认识&SpringBoot整合websocket

    1. 什么是WebSocket?菜鸟对websocket的解释如下 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务 ...

  7. Springboot整合WebSocket实现网页版聊天，快来围观！

  8. 【Java分享客栈】SpringBoot整合WebSocket+Stomp搭建群聊项目

    前言 前两周经常有大学生小伙伴私信给我,问我可否有偿提供毕设帮助,我说暂时没有这个打算,因为工作实在太忙,现阶段无法投入到这样的领域内,其中有两个小伙伴又问到我websocket该怎么使用,想给自己的 ...

  9. springboot整合websocket高级版

    目录 sockjs介绍 产生的原因 环境搭建 springboot整合sockjs 使用场景 聊天室开发 点对点通信 群聊 效果 总结 加入战队 微信公众号 上一章节我们说了websocket的优缺点 ...

随机推荐

  1. Centos系统下 Gitolite安装与相关配置（git权限控制软件）

     确保已经安装了最新版的git服务Git源码安装 Linux指定安装目录,并且创建了 用户名为git 的账户 修改.gitolite.rc #设置gitolite管理的仓库目录 GL_REPO_BAS ...

  2. idea xml版本修改问题

    STEP 1.选中模块 STEP 2.file---->Project Structure---->Facets---->把相应模块的给删除"-"----> ...

  3. linux日常命令之二

    ps -ef 查看当前系统所有进程,ps 进程查看命令,-e 显示所有进程,-f 全格式. free -h 查看系统实际使用内存的情况. 显示格式为: total       used       f ...

  4. vue 15分钟倒计时

    HTML: <span>{{minute}}:{{second}}</span> script: 一          二 // 倒计时 num(n) { return n & ...

  5. Codeforces 215D. Hot Days（贪心）

    题意 有nnn个地区和mmm个学生,在第iii个地区时,车上有kik_iki​个学生,车内温度(当前城市的温度tit_iti​+当前车上的学生kik_iki​)不能超过TiT_iTi​,否则,赔偿每个 ...

  6. Web前端入门教程之浏览器兼容问题及解决方法

    JavaScript 被称为JS,是作为浏览器的内置脚本语言,为我们提供操控浏览器的能力,可以让网页呈现出各种特殊效果,为用户提供友好的互动体验.JS是Web前端入门教程中的重点和难点,而浏览器兼容性 ...

  7. Python hashlib&hmac 模块

    用于加密相关的操作,主要提供 SHA1, SHA224, SHA256, SHA384, SHA512 ,MD5 算法 hashlib模块示例: import hashlib m = hashlib. ...

  8. 【算法和数据结构】_14_小算法_Blank字符替换

    /* 本程序用来将输入的制表符替换为\t, 而将退格替换为\b, 将反斜杠替换为\\ */ #include <stdio.h> #include <stdlib.h> typ ...

  9. SpringBoot项目单元测试

    关于SpringBoot的单元测试,描述一下三种单元测试的方式. 1.约定 单元测试代码写在src/test/java目录下单元测试类命名为*Test,前缀为要测试的类名 2. 使用mock方式单元测 ...

  10. bzoj5048: 塌陷的牧场

    Description 农夫小Q将他的奶牛们饲养在一个长n宽m的矩形网格牧场中.行从上到下依次编号为1到n,列从左往右依次编号为1 到m.为了防止奶牛们逃跑,小Q在牧场外圈安装了一排电网,只要奶牛走出 ...