本文转载自：http://www.jianshu.com/p/8500ad65eb50
WebSocket前端准备
前端我们需要用到两个js文件：
sockjs.js和stomp.js
发送公告功能
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”），当收到消息后，在回调函数中处理业务逻辑。
至此，所有的功能开发完毕！
效果演示
首先我们发布一条公告：
然后我们切到另一个页面，发现内容已变：
