Spring WebSocket初探2 (Spring WebSocket入门教程)<转>
2016-06-27 19:23
615 查看
See more: Spring WebSocket reference
整个例子属于WiseMenuFrameWork的一部分,可以将整个项目Clone下来,如果朋友们有需求,我可以整理一个独立的demo出来。
接上一篇:Spring WebSocket初探1 (Spring WebSocket入门教程)
WebSocket前端准备
前端我们需要用到两个js文件:sockjs.js和stomp.js
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”),当收到消息后,在回调函数中处理业务逻辑。
至此,所有的功能开发完毕!
效果演示
首先我们发布一条公告:然后我们切到另一个页面,发现内容已变:
推荐拓展阅读
文/Devid(简书作者)
原文链接:http://www.jianshu.com/p/8500ad65eb50
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
相关文章推荐
- Spring WebSocket初探1 (Spring WebSocket入门教程)<转>
- JAVA位移运算符了解`<< >> >>>`
- 在Eclipse上搭建SSH框架(Struts 2.5.1 + Spring 4.3.0 + Hibernate 4.3.11)
- 文章标题
- [改善Java代码]不要在构造函数中抛出异常
- Java简单的泛型类和接口
- Java SE基础知识点总结(一)
- <context:component-scan/> <mvc:annotation-driven />
- 简单的邮件开发2--Java
- RXJava——线程控制 —— Scheduler (一)
- java运算符
- RXJava——Subscribe (订阅)
- 从eclipse到Intellij IDEA
- RXJava——创建 Observable
- 【持久层】java程序猿的JDBC知识点
- RxJava——创建 Observer
- SpringBoot入门系列:第七篇 Spring Boot的测试
- eclipse自动调整代码格式
- 新版本eclipse不支持旧版本的eclipse插件(Classpath Helper)
- SVN eclipse插件错误