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

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

 

 

WebSocket前端准备

  • 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);

页面预览:

1240

Paste_Image.png

修改公告功能

1240


当我们发送公告后,将上图的公告信息在不刷新页面的情况下,使用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”),当收到消息后,在回调函数中处理业务逻辑。

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

效果演示

首先我们发布一条公告:

1240

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

1240

转载于:https://my.oschina.net/u/3229047/blog/837449

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/259615.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

String类的使用 Part2

StringBuilder 类的使用 属性&#xff1a; namespace StringBuilderTest {class Program{static void Main(string[] args){StringBuilder s new StringBuilder("hello,world!");Console.WriteLine(s);//Length属性Console.WriteLine("s.Length{0}", s.Le…

JAVA项目怎么不是蓝色_解决IDEA创建maven项目时pom.xml没有变蓝的问题

如下所示&#xff1a;选中pom.xml&#xff0c;右键点击add as maven project&#xff0c;稍等片刻后就可以了补充知识&#xff1a;Idea导入maven项目不自动识别pom.xml*Idea导入maven项目不自动识别pom.xml*当在idea中导入maven项目时&#xff0c;不能自动识别pom文件解决方法&…

C# 6.0:Expression – Bodied Methods

Expression-bodied 方法是C# 6.0 中另一个能简化代码的特性。我们已经对lambda表达式将funciton和delegation关联起来的这种用法很熟悉了。Expression-bodied 将lambda 表达式的这种用法扩展到了方法上。 像下面代码所示&#xff0c;我们有一个GetTime() 方法返回一个格式化的时…

POJ 1228 Grandpa's Estate --深入理解凸包

题意&#xff1a; 判断凸包是否稳定。 解法&#xff1a; 稳定凸包每条边上至少有三个点。 这题就在于求凸包的细节了&#xff0c;求凸包有两种算法&#xff1a; 1.基于水平序的Andrew算法 2.基于极角序的Graham算法 两种算法都有一个类似下面的语句&#xff1a; for(int i0;i&…

赵强老师免费公开课第一季:Hadoop的背景起源

标签&#xff1a;免费直播课 Hadoop 大数据 赵强原创作品&#xff0c;允许转载&#xff0c;转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://51edu.blog.51cto.com/8899635/1897555 Hadoop大数据免费公开课招募啦~~~赵强…

.NET Windows服务应用程序

此文旨在记录个人对windows服务的理解以及学习记录&#xff0c;高人可以直接绕行。 1.Windows 服务体系结构 http://technet.microsoft.com/zh-cn/library/aa998749(vexchg.65).aspx Windows 服务&#xff08;也称服务应用程序&#xff09;是无论用户是否登录都运行在 Windows …

bootstrap-代码-内联代码

说明通过 <code> 标签包裹内联样式的代码片段示例<!DOCTYPE html> <html lang"zh-CN"><head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"view…

java类似php魔术方法_PHP与类有关的几个魔术方法

与类有关的其他魔术方法序列化与反序列化技术含义&#xff1a;序列化&#xff1a;就是将一个变量所代表的“内存”数据&#xff0c;转换为“字符串”形式并持久保存在硬盘上的一种做法。反序列化&#xff1a;就是将序列化之后保存在硬盘上的“字符串数据”&#xff0c;恢复为其…

IIS ARR设置HTTP跳转到HTTPS

GUI Version - Select the website you wish to configure- In the “Features View” panel, double click URL Rewrite You will notice there are currently no rules configured for this site. Click “Add Rules…” in the Actions menu to the right of the “Features…

AutoCAD.NET API 最新(2012)教程下载及在线视频教程DevTV

Autodek最近发布了基于最新版的AutoCAD 2012的.net API开发教程。基本内容包括&#xff1a; Overview of .NETPlugin BasicsUser InteractionDatabase fundamentalsDictionariesUser InterfaceEventsInputPoint MonitorJigs现在就可以从AutoCAD开发者中心下载&#xff0c; 看图…

install python_python install on windows 10

图 1官网2、下载安装包&#xff1a;图 2 Downloads – windows图 3选择版本图 4选择离线安装版本图 5保存下载文件—文件名自己可以修改可能有人看到windows 几个版本&#xff0c;对几个版本有迷惑的地方&#xff0c;解释图 6几个版本的差异说明文字解释&#xff1a;An e…

iOS开发常见错误

错误1&#xff1a; 1.1这种错误都是storyboard有问题 解决&#xff1a;当前storyboard的Custom Class是MJViewController&#xff0c;代码中MJViewController继承自UITableViewController。 而storyboard目前提供的是UIViewController&#xff0c;并没有为MJViewController提供…

windows bat 批处理 !vm 合并快播文件

今天简单的写了一个bat批处理文件 用来处理快播的p2p的文件&#xff0c;一般回事这样的目录 你可以下载如下代码 echo off for /r %%a in (.) do (echo %%acd %%acopy /b *.!mv test.rmvb ) pause保存为merge.bat&#xff0c;就可以执行了 代码解释&#xff1a; 扫描该目录下的…

sso接口的调用

之前一直想sso接口已经写好了&#xff0c;登录注册功能是怎么调用的呢&#xff1f;原来在登录注册的jsp页面实现的接口的调用&#xff0c;页面的校验和验证功能在jsp页面即可实现。 注册页面&#xff1a; <% page language"java" contentType"text/html; cha…

[逆向][Writeup]ISG2015 flagfinder - .NET程序逆向

这个题目同样是一道.NET的逆向题&#xff0c;.NET的逆向方法在之前的博文中已经介绍过&#xff0c;这里不做重复的说明。本题的源程序可以在我的github上下载&#xff1a;https://github.com/gsharpsh00ter/reverse 0x01 逆向 flagfinder为.NET编译的PE文件&#xff0c;用dnSpy…

java 编译原理 字符串_Java编译原理(javac)

Java中的编译分为两个部分&#xff1a;源码文件编译成字节码文件(前端编译)字节码文件被虚拟机加载以后编译成机器码(后端编译)对于开发来说接触的一般都是第一个步骤也就是源码编译成字节码文件(class文件)&#xff0c;第二个步骤开发几乎不会接触&#xff0c;因为这是虚拟机在…

sql2012一段时间无法连接报53错误

2019独角兽企业重金招聘Python工程师标准>>> 解决方案 在sqlserver网络配置下的msqlserver协议下改将ip3改成如下图所示 转载于:https://my.oschina.net/u/2511906/blog/840373

php生成图片验证码代码,PHP生成图片验证码以及点击切换的代码

这篇文章主要介绍了PHP生成图片验证码实例,同时介绍了点击切换(看不清&#xff1f;换一张)效果实现方法,需要的朋友可以参考下这里来看下效果:现在让我们来看下 PHP 代码<?php session_start();function random($len) {$srcstr "1a2s3d4f5g6hj8k9qwertyupzxcvbnm&quo…

php 字符型转变为数值,php怎么把字符串转换为数值?

php怎么把字符串转换为数值&#xff1f;下面本篇文章给大家介绍一下PHP把字符串转换为数值的方法。有一定的参考价值&#xff0c;有需要的朋友可以参考一下&#xff0c;希望对大家有所帮助。PHP中的字符串可以很容易地转换成数值(float / int / double类型)。在大多数用例中&am…

解决rspec 生成报告时报utf-8错误的方法

找到gems\1.9.1\gems\rspec-core-2.14.3\lib\rspec\core\formatters\snippet_extractor.rb文件中的第27行&#xff1a; 在这边记录一下&#xff0c;防止以后再遇到。。。出现这个原因是因为ruby文件用utf-8格式的&#xff0c;但是源码都是GBK处理的&#xff0c;找到\lib\ruby\…