本文转载自:http://www.jianshu.com/p/8500ad65eb50

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

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

效果演示

首先我们发布一条公告:

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

Spring WebSocket入门(二) 转载的更多相关文章

  1. Spring WebSocket入门(一) 转载

    本文转载自:http://www.jianshu.com/p/60799f1356c5 WebSocket是html5带来的一项重大的特性,使得浏览器与服务端之间真正长连接交互成为了可能,这篇文章会带 ...

  2. Spring WebSocket初探2 (Spring WebSocket入门教程)<转>

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

  3. Spring WebSocket初探1 (Spring WebSocket入门教程)<转>

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

  4. Spring Boot入门(二):使用Profile实现多环境配置管理&如何获取配置文件值

    在上一篇博客Spring Boot入门(一):使用IDEA创建Spring Boot项目并使用yaml配置文件中,我们新建了一个最原始的Spring Boot项目,并使用了更为流行的yaml配置文件. ...

  5. spring mvc入门教程 转载自【http://elf8848.iteye.com/blog/875830】

    目录  一.前言二.spring mvc 核心类与接口三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说明 ...

  6. Spring boot 入门二:Spring Boot配置文件详解

    一.自定义属性 当我们创建一个springboot项目的时候,系统默认会为我们在src/main/java/resources目录下创建一个application.properties.同时也支持ym ...

  7. Spring Security 入门 (二)

    我们在篇(一)中已经谈到了默认的登录页面以及默认的登录账号和密码. 在这一篇中我们将自己定义登录页面及账号密码. 我们先从简单的开始吧:设置自定义的账号和密码(并非从数据库读取),虽然意义不大. 上一 ...

  8. Spring Boot入门(二):获取配置文件值

    本篇博客主要讲解下在Spring Boot中如何获取配置文件的值. 1. 使用yaml配置文件 Spring Boot默认生成的配置文件为application.properties,不过它也支持ya ...

  9. 使用Spring框架入门二:基于注解+XML配置的IOC/DI的使用

    一.简述 本文主要讲使用注解+xml配合使用的几种使用方式.基础课程请看前一节. 二.步骤 1.为Pom.xml中引入依赖:本例中使用的是spring-context包,引入此包时系统会自动导入它的依 ...

随机推荐

  1. [bugfix]copy属性参数将NSMutableArray变为NSArray类型

    问题:NSMutableArray 声明为 copy 属性参数后即使接受NSMutableArray变量依然为NSArray变量 测试: 属性申明为: 1 @property (nonatomic, ...

  2. HTML5晃动DeviceMotionEvent事件

      关于devicemotion html5提供了几个新的DOM事件来获得设备物理方向及运动的信息,包括:陀螺仪.罗盘及加速计. 第一个DOM事件是**deviceorientation**,其提供设 ...

  3. jdbc连接远程数据库进行操作

    链接远程数据库的时候,要把获得链接的url进行修改 1 package com.test; import java.sql.Connection; import java.sql.DriverMana ...

  4. Flash中的注册点和中心点

    用一句话概括注册点和中心点的作用,那就是:注册点用来定位,中心点用来变形 当然,这句话不是非常准确,只是暂时先这么理解,下面会详细讲解. 认识注册点 每个元件都有一个注册点.在元件编辑窗口.或在舞台中 ...

  5. hdu 1506(好题+DP或者RMQ)

    Largest Rectangle in a Histogram Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  6. 这种文件别打开, 大小不足1KB, 却可以让你电脑瘫痪

    今年6月份,抖音表白代码火了,不足1kb的txt文件,玩出了新花样.可是你知道吗,这种非常“浪漫”的表白方式,其实存在着很大的风险,甚至会让你的电脑直接瘫痪. 首先,先说一下所谓的表白代码是怎么回事. ...

  7. ubuntu18.04安装时ACPI error 无法进入系统的问题

    问题描述:安装系统时无法进入图形界面 出现 一堆错误 布拉布拉布拉 [0.101261] ACPI Error: [_ppc] Namespace lookup failure, AE_ALREADY ...

  8. Centos7下安装破解confluence6.3

    confluence是一个专业的企业知识管理与协同软件,可以用于构建企业wiki.通过它可以实现团队成员之间的协作和知识共享.现在大多数公司都会部署一套confluence与jira的结合,用作内部w ...

  9. Interllij IDEA 使用Git工具

    1.git简介 git是目前流行的分布式版本管理系统.它拥有两套版本库,本地库和远程库,在不进行合并和删除之类的操作时这两套版本库互不影响.也因此其近乎所有的操作都是本地执行,所以在断网的情况下任然可 ...

  10. 543. Diameter of Binary Tree【Easy】【二叉树的直径】

    Given a binary tree, you need to compute the length of the diameter of the tree. The diameter of a b ...