websocket广播式实例
1、引入相关依赖
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.1.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
</dependencies>
2、写配置类
package springboot.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 { public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/endpointZouHong").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/topic");
}
}
3、实体类
服务端接收类:
package springboot.bean;
public class ZouhongServerMessage {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
浏览器接收类:
package springboot.bean;
public class ZouhongBrowResponse {
private String responseMessage;
public ZouhongBrowResponse(String responseMessage) {
this.responseMessage = responseMessage;
}
public String getResponseMessage() {
return responseMessage;
}
public void setResponseMessage(String responseMessage) {
this.responseMessage = responseMessage;
} }
4、处理器
package springboot.controller;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
import springboot.bean.ZouhongBrowResponse;
import springboot.bean.ZouhongServerMessage; @Controller
public class ZHController {
@MessageMapping("/welcome")
@SendTo("/topic/getResponse")
public ZouhongBrowResponse say(ZouhongServerMessage message) throws Exception{
Thread.sleep();
return new ZouhongBrowResponse("welcome,"+message.getName()+"!");
}
}
5、前端
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>SpringBoot+websocket+广播式</title>
</head>
<body>
<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="@{js/jquery.js}"></script>
<script th:src="@{js/stomp.min.js}"></script>
<script th:src="@{js/sockjs.min.js}"></script>
<script th:inline="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('/endpointZouHong');
stompClient=Stomp.over(socket);
stompClient.connect({},function(frame){
setConnected(true);
console.log("Connected: "+frame);
stompClient.subscribe('/topic/getResponse',function(response){
showResponse(JSON.parse(response.body).responseMessage);
});
});
} function disconnect(){
if(stompClient!=null){
stompClient.disconnect();
}
setConnected(false);
console.log("Disconnected");
} function sendName(){
var name=$("#name").val();
console.log(name);
stompClient.send('/welcome',{},JSON.stringify({'name':name})); } function showResponse(message){
var response=$("#response");
response.html(message); }
</script>
</body>
</html>
6、效果图
websocket广播式实例的更多相关文章
- springboot + websocket + spring-messaging实现服务器向浏览器广播式
目录结构 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http:// ...
- spring+websocket的整合实例--可使用
spring+websocket的整合实例----借鉴如下链接--此贴用于笔记 https://blog.csdn.net/qq_35515521/article/details/78610847
- 新入手服务器不会玩?抢占式实例服务器教程,从零搭建tomcat超简流程
新入手服务器不会玩?抢占式实例服务器教程,从零搭建tomcat超简流程 相信很多新人入手Linux服务器后,一脸无奈,这黑框框究竟能干啥?忽觉巨亏血亏不是? 这里面门道可不是你想象中的那么点,简则服务 ...
- springboot2 -广播式WebSocket
1.WebSocket,STOMP,SockJS含义 WebSocket:WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. SockJS:SockJS 是 We ...
- C++学习笔记36 (模板的细节明确template specialization)和显式实例(template instantiation)
C++有时模板很可能无法处理某些类型的. 例如: #include <iostream> using namespace std; class man{ private: string n ...
- .NET 即时通信,WebSocket服务端实例
即时通信常用手段 1.第三方平台 谷歌.腾讯 环信等多如牛毛,其中谷歌即时通信是免费的,但免费就是免费的并不好用.其他的一些第三方一般收费的,使用要则限流(1s/限制x条消息)要么则限制用户数. 但稳 ...
- C#实现WebSocket协议客户端和服务器websocket sharp组件实例解析
看到这篇文章的题目,估计很多人都会问,这个组件是不是有些显的无聊了,说到web通信,很多人都会想到ASP.NET SignalR,或者Nodejs等等,实现web的网络实时通讯.有关于web实时通信的 ...
- html5 WebSocket的Js实例教程
详细解读一个简单+ ,附带完整的javascript websocket实例源码,以及实例代码效果演示页面,并对本实例的核心代码进行了深入解读. 从WebSocket通讯三个阶段(打开握手.数据传递. ...
- Nginx实战之反向代理WebSocket的配置实例
http://www.jb51.net/article/112183.htm 最近在工作中遇到一个需求,需要使用 nginx 反向代理websocket,经过查找一番资料,目前已经测试通过,所以这篇文 ...
随机推荐
- web 服务
package main import ( "strings" "fmt" "net/http" "log" ) fun ...
- Java的 StringBuffer 和 StringBuilder 类
https://www.runoob.com/java/java-stringbuffer.html 返回值是它本身的类, 所以可以链式调用! 总结就是可以直接在对象上使用 , 可以链式使用, buf ...
- [译][ABP vNext]ABP CLI,v0.18版本的新模板和其他功能
ABP CLI,v0.18版本的新模板和其他功能 ABP v0.18已发布, 包含解决的70+个issue,500+次提交 网站更改 abp.io网站完全更新以突出ABP框架的目标和重要功能.文档和博 ...
- Win10安装 oracle11g 出现INS-13001环境不满足最低要求解决方法
Win10安装 oracle11g 出现INS-13001环境不满足最低要求 首先,打开你的解压后的database文件夹,找到stage,然后cvu,找到cvu_prereq.xml文件,用note ...
- Harbor + Https 部署
关闭防火墙和selinux systemctl stop firewalld sed -i 's/SELINUX=.*/SELINUX=disabled/g' /etc/sysconfig/selin ...
- JavaScript DOM 常用操作
1.理解DOM: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript ...
- 【MySQL】多表查询&事务&权限管理
多表查询: 查询语法: select 列名列表 from 表名列表 where.... 例子: 创建部门表 CREATE TABLE dept( id INT PRIMARY KEY AUTO_INC ...
- 开源工作流引擎 Workflow Core 的研究和使用教程
目录 开源工作流引擎 Workflow Core 的研究和使用教程 一,工作流对象和使用前说明 二,IStepBuilder 节点 三,工作流节点的逻辑和操作 容器操作 普通节点 事件 条件体和循环体 ...
- List的Clear方法与RemoveAll方法用法小结
转自:https://blog.csdn.net/yl2isoft/article/details/17059093 结果分析 执行List的Clear方法和RemoveAll方法,List将清除指定 ...
- element-ui MessageBox组件源码分析整理笔记(十二)
MessageBox组件源码,有添加部分注释 main.vue <template> <transition name="msgbox-fade"> < ...