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

   
     
     
     
     
    
    
        
        Connect 
       Disconnect    
    
    
    
        
        
            
            notice content?        
        
        
        
            
                      
        
        
        Send        
        
    
    


   
     
     
     
     
javascript代码
   
     
     
     
     




   
     
     
     
     

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