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

转：http://www.jianshu.com/p/8500ad65eb50

官方：https://docs.spring.io/spring/docs/current/spring-framework-reference/web.html#websocket-intro-architecture

从网上看了一些相关的关于入门的教程，基本上都是千篇一律的代码，就像官网上写的例子一样，把例子抄写一下实现，没有相关说明，看了简书上的这一篇相对来说详细一点，及对各配置的说明，不仅仅是一个实例demo,所以转载过来做为入门笔记使用，更多详细说明还需要参考官网文档说明

 
 

  
  

   
   
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
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。