Spring WebSocket初探2 (Spring WebSocket入门教程)

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代码

    
    
        
        Connect 
       Disconnect    
    
    
    
        
        
            
            notice content?        
        
        
        
            
                      
        
        
        Send        
        
    
    

_{javascript代码}

相关说明：
关于JavaScript实现WebSocket的功能很简单,基本分以下几步：

开启Socket

1. var socket = new SockJS('/socket'); 先构建一个SockJS对象
2. stompClient = Stomp.over(socket); 用Stomp将SockJS进行协议封装
3. 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”），当收到消息后，在回调函数中处理业务逻辑。

至此，所有的功能开发完毕！

效果演示

首先我们发布一条公告：

然后我们切到另一个页面，发现内容已变：