专栏首页智慧协同Spring WebSocket初探2 (Spring WebSocket入门教程)

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

See more: Spring WebSocket reference 整个例子属于WiseMenuFrameWork的一部分,可以将整个项目Clone下来,如果朋友们有需求,我可以整理一个独立的demo出来。

接上一篇:Spring WebSocket初探1 (Spring WebSocket入门教程)

WebSocket前端准备

前端我们需要用到两个js文件: sockjs.jsstomp.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

  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”),当收到消息后,在回调函数中处理业务逻辑。

至此,所有的功能开发完毕!

效果演示

首先我们发布一条公告:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 我的NodeJS学习之路9(改善代码)

    今天是不幸的一天,为什么说呢,因为Github挂了!全球最大的同性交友网站挂了,让我等技术宅还怎么好好的撸代码呢?

    飞奔去旅行
  • 用Hexo搭建静态博客出现spawn ENOENT的解决办法

    原因是: 在cmd中敲命令导致无法上传github,改为在git bash中deploy 后正常。因为可能当初装git时只使用 git bash,导致cmd中...

    飞奔去旅行
  • Centos7下将Tomcat8注册为服务

    飞奔去旅行
  • 过去一百年那些“被打脸”的科技预言

    大数据文摘
  • Apache Avro 入门

    Apache Avro(以下简称 Avro)是一种与编程语言无关的序列化格式。Doug Cutting 创建了这个项目,目的是提供一种共享数据文件的方式。

    CoderJed
  • rpc框架之avro 学习 1 - hello world

    avro是hadoop的一个子项目,提供的功能与thrift、Protocol Buffer类似,都支持二进制高效序列化,也自带RPC机制,但是avro使用起来...

    菩提树下的杨过
  • 大数据如何让传统的制造业重新焕发活力?

    虽然制造业是一个十分传统的行业,但是这一行业依然能够从大数据中受益颇多。由于获得了新的分析工具和更好的收集信息的方式,制造业正在不断发展。 ? 大数据如何改变制...

    钱塘数据
  • 如何利用多张图片生成一张会自己动的gif图片?

    看一下比较形象的卷积神经网络原理的图片和卷积操作原理的图片,显然,gif图片十分生动形象。然我们看一下如何自己制作gif图片吧,学会了可以自己制作表情包哦~

    AI深度学习求索
  • 通过示例来学习ES2016, 2017, 2018的新特性

    为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

    Fundebug
  • CRM 702和CRM 712的区别

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动