js 链接websocket马上断开_SpringBoot+WebSocket实现简单的数据推送
问题背景
为什么要要用websocket呢?websocket相对于传统http协议有什么优势呢?
http协议有一个缺陷,就是通信只能由客户端发起,服务器返回数据,不能做到服务器主动向客户端推送。这就导致了一个弊端,假如我要获得服务器连续的状态变化,那么我只能每隔一段时间向服务器发起请求,也就是所谓的轮询,这就导致了大量的资源浪费。由此,websocket应运而生,来解决这一痛点。
websocket使用tcp连接保持全双工通信协议,服务器端比较容易实现;
数据格式比较轻量,通信比较高效;
既能发送文本,也能发送二进制数据,没有同源限制;
wbsocket响应报文与http不同,如下
websocket响应报文
好了,简单的了解一下,我们来看看springboot+websocket实现推送的过程,以下是个简单的demo。
搭建过程
首先我们初始化一个spring boot项目,大家可以根据自己的习惯去官网下载或者用idea来生成,这里我不多说,主要的是引入websocket依赖,如下图;
websocket依赖
编写websocket配置类,这里直接new 一个ServerEndpointExporter就行了
@Componentpublic class WebSocketConfig {@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter(); }}
编写websocket推送服务端
@Component@ServerEndpoint(value = "/websocket/logging")public class LoggingWSServer {private static final Logger LOGGER = LoggerFactory.getLogger(LoggingWSServer.class);private static Map sessionMap = new ConcurrentHashMap<>();private static Gson gson = new Gson();private static Map map = new ConcurrentHashMap<>();@OnOpenpublic void onOpen(Session session) {new Thread(() -> { // 这里大家可以根据业务来优化,使用线程池等手段 while(sessionMap.get(session.getId()) != null) { try { List list = aaaServerService.findList(); if(session.isOpen()) { send(session, gson.toJson(list)); } Thread.sleep(5000); } catch (InterruptedException e) { e.printStackTrace(); } } }).start(); } @OnClose public void onClose(Session session) { sessionMap.remove(session.getId()); LOGGER.info("session断开连接:{}" , session.getId()); } @OnMessage public void onMessage(String message,Session session) { LOGGER.info("收到客户端的消息:{}",message); map.put("ret",message); send(session,gson.toJson(map)); } private void send(Session session, String toJson) { try { session.getBasicRemote().sendText(toJson); } catch (IOException e) { LOGGER.error("发送错误:{}",e.getMessage()); } } }
服务端api解释:
OnOpen:在这个端点连接时被调用;
OnClose:与OnOpen相反,连接断开时被调用
OnMessage:服务端收到客户端的信息时被调用
OnError:当然还有这个,上面没有列出,这是发送错误时被调用
编写前端页面,这里只展示js
//websocket对象 var websocket = null; //判断当前浏览器是否支持WebSocket if ('WebSocket' in window) { //动态获取域名或ip var hostname = window.location.hostname; port = window.location.port; websocket = new WebSocket("ws://"+hostname+":" + port + "/websocket/logging"); } else { console.error("不支持WebSocket"); } //连接发生错误的回调方法 websocket.onerror = function (e) { console.error("WebSocket连接发生错误" + e); }; //连接成功建立的回调方法 websocket.onopen = function () { console.log("WebSocket连接成功") }; //接收到消息的回调方法 websocket.onmessage = function (event) { console.log("数据是:", event.data ); var data = JSON.parse(event.data); if (data.push) { // 内容 var temp = template('tpl_data',{data : data.push}); console.log("模板==" + temp); document.getElementById("tb").innerHTML = temp; } if(data.ret) { console.log(data.ret) alert(data.ret); } } //发送消息 $('#send').click(function () { websocket.send($('#sMsg').val()); });
前端页面注意:
编写的时候一定要注意一个地方,就是new WebSocket 的地址,一定要和服务端推送的那个地址相同,不然的话,这里接收不到推送过来的数据。
另外,有些浏览器可能不支持websocket,也没关系,可以使用sockjs或者stomp.js,这是基于websocket的上层协议,大家可以自行去了解以下。不过要注意,sockjs 处理的url是http或者https,不在是以ws开头的。
结语
今天就简单的介绍到这里,有需要这个demo的,可以关注一下小编,后续小编会把代码上传到gitee,https://gitee.com/bigqianqian/springboot-websocket,可以了解下。
来源:
“IT大咖说”欢迎广大技术人员投稿,投稿邮箱:aliang@itdks.com
来都来了,走啥走,留个言呗~
IT大咖说 | 关于版权
由“IT大咖说(ID:itdakashuo)”原创的文章,转载时请注明作者、出处及微信公众号。投稿、约稿、转载请加微信:ITDKS10(备注:投稿),茉莉小姐姐会及时与您联系!
感谢您对IT大咖说的热心支持!
相关推荐
推荐文章
Terminal Preview 1.4 发布,支持超链接
线上JVM调优实践,FullGC40次/天到10天一次的优化
Andy邀你共探未来“数据酷”世界
很少用到,但掏出来让人感到牛逼的Web API
Win10又翻车,微软承认9月补丁存在Bug,SSD硬盘遭殃
Linux Lab v0.5 正式发布,功能强大,用法简单
js 链接websocket马上断开_SpringBoot+WebSocket实现简单的数据推送相关推荐
- websocket 本地可以服务器断开 springboot linux_SpringBoot+WebSocket实现简单的数据推送...
问题背景 为什么要要用websocket呢?websocket相对于传统http协议有什么优势呢? http协议有一个缺陷,就是通信只能由客户端发起,服务器返回数据,不能做到服务器主动向客户端推送.这 ...
- java 推送数据给js,Node.js实现数据推送
场景:后端更新数据推送到客户端(Java部分使用Tomcat服务器). 后端推送数据的解决方案有很多,比如轮询.Comet.WebSocket. 1. 轮询对于后端来说开发成本最低,就是按照传统的方式 ...
- js 链接websocket马上断开_WebSocket之基于STOMP协议的广播模式实现群聊功能
又是一个老套的古诗词赏析 不恨此花飞尽,恨西园.落红难缀.--苏轼<水龙吟·次韵章质夫杨花词> WebSocket与STOMP协议 相关简介 WebSocket WebSocket 是一种 ...
- java websocket修改为同步_服务端向客户端推送消息技术之websocket的介绍
websocket的介绍 在讲解WebSocket前,我们先来看看下面这种场景,在HTTP协议下,怎么实现. 需求: 在网站中,要实现简单的聊天,这种情况怎么实现呢?如下图: 当发送私信的时候,如 ...
- flask websocket json_Win10环境下使用Flask配合Celery异步推送实时/定时消息/2020年最新攻略...
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_163 首先得明确一点,和Django一样,在2020年Flask 1.1.1以后的版本都不需要所谓的三方库支持,即Flask-Ce ...
- unity使用websocket接受服务器数据推送
最近考虑到项目中如果监听一个设备信息的话,需要持续的监听,如果用unity一直请求的话会很消耗性能,所以在网上搜了一下,发现这种需求叫推送服务,在网上找到好多说用插件的,但是我不想用插件,然后找到了一 ...
- js中websocket基本使用及数据量过大或推送频率过快等基本问题
WebSocket的定义 WebSocket是html5提供的一种在单个TCP连接上进行双向通信的协议,解决了客户端和服务端之间的实时通信问题.浏览器和服务器只需完成一次握手,两者之间就可以创建一个持 ...
- node.js Websocket消息推送---GoEasy
Goeasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送!个人感觉goeasy推送更稳定,推送速度快,代码简单易懂上手快 浏览器兼容性:GoEasy推送支持websocket 和 ...
- 【JavaWeb】小白也能看懂的服务器推送技术(WebSocket和SSE)
一.什么是消息推送 推送的场景比较多,比如有人关注我的公众号,这时我就会收到一条推送消息,以此来吸引我点击打开应用. 消息推送(push)通常是指网站的运营工作等人员,通过某种工具对用户当前网页或移动 ...
最新文章
- AI靠语意理解把照片变抽象画,无需相应数据集,只画4笔也保留神韵,有毕加索内味儿了...
- C#.NET通过Socket实现平行主机之间网络通讯(含图片传输的Demo演示)
- java编程button_以编程方式在Java Swing中单击GUIbutton
- RISC-V应用创新大赛 | 一文详解RVB2601套件 助你快速上手赢比赛
- 割点、割边(桥) tarjan
- 在vue-cli中搭建mock服务器
- 手机知识:90Hz或120Hz屏幕刷新率有啥区别,看完你就懂了!
- 如何以及何时使用枚举和注释
- CentOS 6.4安装pip,CentOS安装python包管理安装工具pip的方法
- Python四大金刚之四:集合
- mysql主从复制之异常解决--- Slave_IO_Running: NO
- 最新《大规模机器学习》2020综述论文
- 小程序textarea的行间距_微信小程序组件:textarea多行输入框解读和分析
- 工业用Linux版本,工业主板支持哪些版本的LINUX系统?
- 用法 the_英语冠词:不定冠词a,an和定冠词the的用法
- HTML网页设计结课作业——19张精美网页!
- Exchange 2010安装先决条件及注意事项
- opencv | A02 播放本地视频 调用摄像头
- 运动会分数统计系统(数据结构)C++
- 威斯康星大学计算机科学教授,美国威斯康星大学周家振访问沈阳自动化所