Spring WebSocket入门(二) 转载
本文转载自:http://www.jianshu.com/p/8500ad65eb50
WebSocket前端准备
前端我们需要用到两个js文件:
sockjs.js和stomp.js
发送公告功能
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);
页面预览:
修改公告功能
当我们发送公告后,将上图的公告信息在不刷新页面的情况下,使用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”),当收到消息后,在回调函数中处理业务逻辑。
至此,所有的功能开发完毕!
效果演示
首先我们发布一条公告:
然后我们切到另一个页面,发现内容已变:
Spring WebSocket入门(二) 转载的更多相关文章
- Spring WebSocket入门(一) 转载
本文转载自:http://www.jianshu.com/p/60799f1356c5 WebSocket是html5带来的一项重大的特性,使得浏览器与服务端之间真正长连接交互成为了可能,这篇文章会带 ...
- Spring WebSocket初探2 (Spring WebSocket入门教程)<转>
See more: Spring WebSocket reference整个例子属于WiseMenuFrameWork的一部分,可以将整个项目Clone下来,如果朋友们有需求,我可以整理一个独立的de ...
- Spring WebSocket初探1 (Spring WebSocket入门教程)<转>
See more: Spring WebSocket reference整个例子属于WiseMenuFrameWork的一部分,可以将整个项目Clone下来,如果朋友们有需求,我可以整理一个独立的de ...
- Spring Boot入门(二):使用Profile实现多环境配置管理&如何获取配置文件值
在上一篇博客Spring Boot入门(一):使用IDEA创建Spring Boot项目并使用yaml配置文件中,我们新建了一个最原始的Spring Boot项目,并使用了更为流行的yaml配置文件. ...
- spring mvc入门教程 转载自【http://elf8848.iteye.com/blog/875830】
目录 一.前言二.spring mvc 核心类与接口三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说明 ...
- Spring boot 入门二:Spring Boot配置文件详解
一.自定义属性 当我们创建一个springboot项目的时候,系统默认会为我们在src/main/java/resources目录下创建一个application.properties.同时也支持ym ...
- Spring Security 入门 (二)
我们在篇(一)中已经谈到了默认的登录页面以及默认的登录账号和密码. 在这一篇中我们将自己定义登录页面及账号密码. 我们先从简单的开始吧:设置自定义的账号和密码(并非从数据库读取),虽然意义不大. 上一 ...
- Spring Boot入门(二):获取配置文件值
本篇博客主要讲解下在Spring Boot中如何获取配置文件的值. 1. 使用yaml配置文件 Spring Boot默认生成的配置文件为application.properties,不过它也支持ya ...
- 使用Spring框架入门二:基于注解+XML配置的IOC/DI的使用
一.简述 本文主要讲使用注解+xml配合使用的几种使用方式.基础课程请看前一节. 二.步骤 1.为Pom.xml中引入依赖:本例中使用的是spring-context包,引入此包时系统会自动导入它的依 ...
随机推荐
- 【python】r+,w+ 全局变量
来源:http://www.educity.cn/wenda/352188.html r+:可读可写,若文件不存在,报错w+: 可读可写,若文件不存在,创建文本模式:遇换行符时根据操作系统不同自动转换 ...
- python_day6学习笔记
一.Logger模块 logging.basicConfig函数 可通过具体参数来更改logging模块默认行为,可用参数有 filename: 用指定的文件名创建FiledHandler(后边会具体 ...
- 多路复用I/O模型select() 模型 代码实现
多路复用I/O: socket编程之select(),poll(),epoll() 代码: client.c #include <stdio.h> #include <sys/ty ...
- 赤峰项目目前的mysql配置项目
#BEGIN CONFIG INFO #DESCR: 4GB RAM, InnoDB only, ACID, few connections, heavy queries #TYPE: SYSTEM ...
- Git----创建远程分支,并将文件上传到创建的远程分支上
1.首先创建一个远程仓库 2.将远程仓库克隆到本地 (1)本地新建文件夹,命令行进入文件夹,执行clone操作 (2) git clone git@github.com:Lucky-Syw/lucky ...
- Nodejs Bot学习
关于示例部分可以参考<BotFramework Nodejs示例><BotBuilder Nodejs示例查看> Bot Framework Nodejs SDK包括几种与用户 ...
- Ubuntu 16.04 LTS安装Docker并使用加速器
参考优酷:http://v.youku.com/v_show/id_XMTkxOTYwODcxNg==.html?spm=a2h0k.8191407.0.0&from=s1.8-1-1.2 首 ...
- 单例(LintCode)
单例 单例 是最为最常见的设计模式之一.对于任何时刻,如果某个类只存在且最多存在一个具体的实例,那么我们称这种设计模式为单例.例如,对于 class Mouse (不是动物的mouse哦),我们应将其 ...
- 使用Nginx的配置对cc攻击进行简单防御
ddos攻击:分布式拒绝服务攻击,就是利用大量肉鸡或伪造IP,发起大量的服务器请求,最后导致服务器瘫痪的攻击. cc攻击:类似于ddos攻击,不过它的特点是主要是发起大量页面请求,所以流量不大,但是却 ...
- 【Java多线程】线程池学习
Java线程池学习 众所周知,Java不仅提供了线程,也提供了线程池库给我们使用,那么今天来学学线程池的具体使用以及线程池基本实现原理分析. ThreadPoolExecutor ThreadPool ...