Spring WebSocket初探2 (Spring WebSocket入门教程)
2019独角兽企业重金招聘Python工程师标准>>>
WebSocket前端准备
- SockJS:
SockJS 是一个浏览器上运行的 JavaScript 库,如果浏览器不支持 WebSocket,该库可以模拟对 WebSocket 的支持,实现浏览器和 Web 服务器之间低延迟、全双工、跨域的通讯通道。- Stomp
Stomp 提供了客户端和代理之间进行广泛消息传输的框架。Stomp 是一个非常简单而且易用的通讯协议实现,尽管代理端的编写可能非常复杂,但是编写一个 Stomp 客户端却是很简单的事情,另外你可以使用 Telnet 来与你的 Stomp 代理进行交互。
发送公告功能
html代码
<div> <div> <button id="connect" onclick="connect();">Connect</button> <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button> </div> <div id="conversationDiv"> <p> <label>notice content?</label> </p> <p> <textarea id="name" rows="5"></textarea> </p> <button id="sendName" onclick="sendName();">Send</button> <p id="response"></p> </div>
</div>
javascript代码
<script src="/js/sockjs-0.3.4.min.js"></script>
<script src="/js/stomp.min.js"></script>
<script> var stompClient = null; function setConnected(connected) { document.getElementById('connect').disabled = connected; document.getElementById('disconnect').disabled = !connected; document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden'; document.getElementById('response').innerHTML = ''; } // 开启socket连接function connect() { var socket = new SockJS('/socket'); stompClient = Stomp.over(socket); stompClient.connect({}, function (frame) { setConnected(true); }); } // 断开socket连接function disconnect() { if (stompClient != null) { stompClient.disconnect(); } setConnected(false); console.log("Disconnected"); } // 向‘/app/change-notice’服务端发送消息function sendName() { var value = document.getElementById('name').value; stompClient.send("/app/change-notice", {}, value); } connect();
</script>
相关说明:
关于JavaScript实现WebSocket的功能很简单,基本分以下几步:开启Socket
var socket = new SockJS('/socket');
先构建一个SockJS对象stompClient = Stomp.over(socket);
用Stomp将SockJS进行协议封装stompClient.connect()
与服务端进行连接,同时有一个回调函数,处理连接成功后的操作信息。发送消息
stompClient.send("/app/change-notice", {}, value);
页面预览:
Paste_Image.png
修改公告功能
当我们发送公告后,将上图的公告信息在不刷新页面的情况下,使用WebSocket将其改变。发送公告的前端代码已经完成,现在我们来写另一个客户端,用来接收第一个页面发送的公告,展示在上图红框中。
功能比较简单,所以下面只给出部分js代码:
var noticeSocket = function () { var s = new SockJS('/socket'); var stompClient = Stomp.over(s); stompClient.connect({}, function () { console.log('notice socket connected!');stompClient.subscribe('/topic/notice', function (data) { $('.message span.content').html(data.body); }); });
};
相关说明:
这里与发送公告代码不同的是,在stompClient
建立连接成功之后,我们要监听服务端发送过来的信息,接收到之后,改变页面上公告的内容,所以用到了stompClient.subscribe()
这个subscribe()
方法功能就是定义一个订阅地址,用来接收服务端的信息(在服务端代码中,我们在@SendTo
中指定了这个订阅地址“/topic/notice”),当收到消息后,在回调函数中处理业务逻辑。
至此,所有的功能开发完毕!
效果演示
首先我们发布一条公告:
然后我们切到另一个页面,发现内容已变:
转载于:https://my.oschina.net/u/3229047/blog/837449
Spring WebSocket初探2 (Spring WebSocket入门教程)相关推荐
- 零基础SSM入门教程(0)--教程背景与目录
点此查看 零基础JavaWeb全栈文章目录及源码下载 1. 背景 本教程的出发点是写一个比较条理,比较全面的SSM系列教程,首先造福自己.理顺自己的知识体系,然后也造福大众,因为网上现存的资源相对比较 ...
- springboot 入门教程(4)--web开发(spring mvc和Thymeleaf模板,带源码)
2019独角兽企业重金招聘Python工程师标准>>> 首先回顾下前几篇的内容:springboot 入门教程(1),springboot 入门教程-Thymeleaf(2), sp ...
- websocket 安全_将Websocket与Spring Framework和Vuejs结合使用
websocket 安全 Websocket是客户端和服务器之间的全双工(持久)连接,因此两者可以彼此共享信息,而无需重复建立新的连接. 这消除了从客户端重复轮询以从服务器获取更新的需要. 并非所有浏 ...
- java mvc 小程序_[Java教程]Spring MVC 的环境搭建和入门小程序
[Java教程]Spring MVC 的环境搭建和入门小程序 0 2017-02-17 00:00:16 1.1.下载spring框架包. 1.1.1百度搜索Spring Framework. 进入s ...
- springboot 创建地址_这可能是史上最易懂的 Spring Boot 入门教程
目录 一.Spring Boot 是什么 二.为什么要使用 Spring Boot 三.快速入门 3.1 创建 Spring Boot 项目 3.2 项目结构 3.3 引入 Web 依赖 3.4 编写 ...
- MongoDB最简单的入门教程之四:使用Spring Boot操作MongoDB
Spring Boot 是一个轻量级框架,可以完成基于 Spring 的应用程序的大部分配置工作.Spring Boot的目的是提供一组工具,以便快速构建容易配置的Spring应用程序,省去大量传统S ...
- “Spring入门”教程系列
大家好, 我很高兴向您介绍"Spring入门"教程系列! 这是一系列文章,最初由我们的JCG合作伙伴 Michal Vrtiak在vrtoonjava博客上撰写 . 本系列中将逐步 ...
- SpringCloud 入门教程(十):和RabbitMQ的整合 -- 消息总线Spring Cloud Netflix Bus
在本教程第三讲Spring Cloud 入门教程(三): 配置自动刷新中,通过POST方式向客户端发送/refresh请求, 可以让客户端获取到配置的最新变化.但试想一下, 在分布式系统中,如果存在很 ...
- Spring Cloud入门教程(二):客户端负载均衡(Ribbon)
对于大型应用系统负载均衡(LB:Load Balancing)是首要被解决一个问题.在微服务之前LB方案主要是集中式负载均衡方案,在服务消费者和服务提供者之间又一个独立的LB,LB通常是专门的硬件,如 ...
最新文章
- 201621123030《Java程序设计》第4周学习总结
- yapi-docker
- 前端实例练习 - 轮播图
- mysql8.0提示命令_Mysql 8.0 相关命令
- 八数码问题II-bfs和map标记
- LeetCode MySQL 614. 二级关注者
- 苏州宾馆管理也计算机哪个学校好,苏州十大寄宿式中学学校排名榜
- ASP.NET MVC 2 正式版发布了的
- COCOS CREATOR(TS)之按钮事件
- atitit.跨平台gui 概览
- vbe编程真人小代码
- 斐讯K2路由器刷固件实现校园网可使用
- oracle 安全备份与rman_Oracle RMAN备份与还原注意事项
- 8188gu驱动和su realtek_Realtek瑞昱RTL8192SU/RTL8188SU/RTL8192GU无线网卡驱动怎么样
- BZOJ3894:文理分科——题解
- 手机选择之我见——需求分析
- PostgreSQL - 学习/实践
- 生成世界地图并在地图上画圆圈
- Dynamodb 备份方案
- js 递归树根据子节点获取所有父节点