Spring MVC(11):通过 WebSocket 实现前后端全双工通信
Spring WebSocket 支持
- IE:10.0(完整支持);
- FireFox:4.0(部分支持),6.0(完整支持);
- Chrome:4.0(部分支持),13.0(完整支持);
- Opera:11.0(部分支持),12.10(完整支持);
- Safari:5.0(部分支持),12.10(完整支持);
- IOS Safari:4.2(部分支持),6.0(完整支持);
- Android Browser:4.4(完整支持);
- JavaEE 7.0+
- Tomcat 8.0+
- Jetty 7.0+
- 发送和接收信息的 API;
- 用于发送信息的模板;
- 支持 SockJS(用于解决浏览器、服务器及代理不支持 WebSocket 的问题);
Spring MVC WebSocket 程序的实现
handleTextMessage | 处理接收的文本类型消息 |
handleBinaryMessage | 处理接收的二进制类型消息 |
handlePongMessage | 处理接收的Pong类型的消息 |
handleTransportError | 处理接收Exception信息 |
afterConnectionEstablished | 在建立 Websocket 连接后的执行方法 |
afterConnectionClosed | 在关闭 Websocket 连接后的执行方法 |
package site.assad.web;
public class HelloWebSocketHandler extends AbstractWebSocketHandler {
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
//处理文本消息
System.out.println("get message: " + message.getPayload());
//模拟延时
Thread.sleep(2000);
//发送信息
System.out.println("send message: Hello world!");
session.sendMessage(new TextMessage("from server: Hello world!"));
}
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
System.out.println("websocket connected");
}
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
System.out.println("websocket connection close");
}
}
<!--装载 WebSocketHandler bean -->
<bean id="helloHandler" class="site.assad.web.HelloWebSocketHandler" />
<!--将 WebSocketHandler 映射到对应路由-->
<webscket:handlers>
<webscket:mapping handler="helloHandler" path="/hello"/>>
</webscket:handlers>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>websocket 测试</title>
<script type="text/javascript">
//创建 websocket
var url = 'ws://'+ window.location.host + '<%= request.getContextPath() %>/hello';
var sock = new WebSocket(url);
//websocket 连接行为
sock.onopen = function(){
console.log('开启 websocket 连接');
sayHello();
};
//websocket 接受到信息行为
sock.onmessage = function(e){
console.log('接受信息',e.data);
setTimeout(function(){sayHello()},2000);
};
//websocket 关闭行为
sock.onclose = function(){
console.log('关闭 websocket 连接');
};
function sayHello() {
console.log('发送信息:hello world!');
sock.send('form client: Hello world!');
}
</script>
</head>
<body>
Hello world!
</body>
</html>
![](/assets/blank.gif)
![](/assets/blank.gif)
一个示例的具体使用场景
![](/assets/blank.gif)
package site.assad.web;
public class PMWebSocketHandler extends AbstractWebSocketHandler{
private static final Logger log = LogManager.getLogger();
@Autowired
private PMService pmService;
private MessageSendThread thread ; //信息发送线程
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
String city = message.getPayload().trim();
log.debug("get: " + city);
if(thread == null){
thread = new MessageSendThread(session,city);
thread.start();
}
thread.setCity(city);
}
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
if(thread != null)
thread.kill();
}
private class MessageSendThread extends Thread{
private volatile boolean isRunning = true;
private WebSocketSession session ;
private volatile String city;
public MessageSendThread(WebSocketSession session, String city) {
this.session = session;
this.city = city;
}
public void setCity(String city) {
this.city = city;
}
@Override
public void run() {
while(isRunning){
try {
String sendMsg = pmService.getData(city);
log.debug("send:" + sendMsg);
session.sendMessage(new TextMessage(sendMsg));
Thread.sleep(1000);
} catch (IOException e) {
e.printStackTrace();
} catch (InterruptedException e) {
}
}
}
public void kill(){
isRunning = false;
}
}
}
<!--装载业务层 bean -->
<context:component-scan base-package="site.assad.service" />
<!--装载 WebSocketHandler bean -->
<bean id="pmHandler" class="site.assad.web.PMWebSocketHandler" />
<!--将 WebSocketHandler 映射到对应路由-->
<webscket:handlers>
<webscket:mapping handler="pmHandler" path="/pm25"/>
</webscket:handlers>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>WebSocket 测试</title>
<script type="text/javascript">
var url = 'ws://' + window.location.host + '<%= request.getContextPath() %>/pm25'; //本机测试,真实常见下更换为服务主机 url
var sock = new WebSocket(url);
sock.onopen = function(){
changeCity("bj");
};
sock.onmessage = function(e){
console.log("get:"+ e.data);
document.getElementById("showData").innerHTML = e.data;
};
function changeCity(city){
console.log("send: "+city);
sock.send(city);
}
</script>
</head>
<body>
<h1>PM 2.5 AQI 实时刷新数据</h1>
<button onclick="changeCity('bj')">北京</button>
<button onclick="changeCity('gz')">广州</button>
<br/>
<p id="showData"></p>
</body>
</html>
Spring MVC(11):通过 WebSocket 实现前后端全双工通信相关推荐
- springboot websocket_SpringBoot 集成 WebSocket 实现前后端消息互传
WebSocket 协议是基于 TCP 的一种新的网络协议.它实现了浏览器与服务器全双工 (full-duplex) 通信-允许服务器主动发送信息给客户端. 为什么需要WebSocket? 大家都知道 ...
- 如何使用websocket实现前后端通信
如何使用websocket实现前后端通信 websocket通信是很好玩的,也很有用的的通信方式,使用方式如下: 第一步由于springboot很好地集成了websocket,所以先在在pom.xml ...
- aes 加密_结合RSA与AES实现前后端加密通信
结合RSA与AES实现前后端加密通信 一.思路 使用RSA秘钥生成工具生成一对公钥(A)和私钥(B),前端保留A,后端保留B. 前端发送数据时,先生成一串随机16位字符串作为AES的秘钥(C),然后使 ...
- 超实用,Spring Security+JWT+Vue实现一个前后端分离无状态认证Demo
作者: 陕西颜值扛把子 https://zhuanlan.zhihu.com/p/95560389 精彩推荐 一百期Java面试题汇总 SpringBoot内容聚合 IntelliJ IDEA内容聚合 ...
- SpringBoot+Vue整合WebSocket实现前后端消息推送
场景 WebSocket HTTP 协议是一种无状态的.无连接的.单向的应用层协议.它采用了请求/响应模型.通信请求只能由客户端发起,服务端对请求做出应答处理. 这种通信模型有一个弊端:HTTP 协议 ...
- WebSocket 实现前后端通信的笔记
之前在做站内信时,用到了 WebSocket ,整理了一些笔记分享如下. 本文基于 SpringBoot 2.1.5,本文不涉及环境搭建. 引入依赖 在 Spring 中要使用 WebSocket 功 ...
- Spring Boot与JWT整合实现前后端分离的用户认证
前言 本篇使用java-jwt作为JWT库,与Spring Boot整合实现前后端分离架构中用户认证. Spring Boot项目搭建参考: [Spring Boot系列]1. 项目搭建之一 关于JW ...
- websocket php apache,PHP第一篇:PHP WebSocket实现前后端数据交互,亲测可用(windows+ apache2.4 +php5.6 )...
首先贴上参考的教程: ①:https://blog.csdn.net/lian772882/article/details/81386115(主) ②:https://www.cnblogs.com/ ...
- springboot flask php,使用Vue,Spring Boot,Flask,Django 完成Vue前后端分离开发(二)
使用Vue完成前后端分离开发(二) Bravery never goes out of fashion. 勇敢永远不过时. 前面简单说了一下 Vue 项目的搭建和项目的大致页面,这里讲一下 Djang ...
最新文章
- pycharm中R工具包的安装
- 分布式系统原理 之6 两阶段提交协议
- 设计模式大集锦 程序员面试全攻略
- php curl处理get和post请求
- html使用element ui_Kendo UI for jQuery使用教程:自定义小部件(二)
- ArcGIS Flex API 中的 Flex 技术(一)--事件
- notepad自动对齐html代码,notepad如何存储为html格式化
- 【送书福利】第一次送书活动(总共10本)
- java学习过程记录
- python以文本方式字节流_如何在Python3中将文本流编码为字节流?
- 网络通信词汇——MCC、MNC、dbm、TAC、ECI、PCI、BAND、EARFCN、FREQ、RSSI、RSRP、RSRQ、SINR
- 解决“安装程序无法创建新的系统分区,也无法定位现有系统分区”问题方法
- 网络七层协议,五层协议概述
- Bug heroes虫虫英雄 超详细翻译+基本攻略
- python 等值面_三维等值面提取算法(Dual Contouring)
- 如何用GoldWave生成音频的回音效果
- 【过关斩将】高胜寒带你理清 “为什么从上家公司离职?”
- 【猿说VUE】条件渲染,绝代双骄之 v-if 和v-show
- Mac上一款最受欢迎的SSH客户端
- 高通平台wifi命令操作