客户服务器显示例子,WebSocket实现数据库更新前台实时显示(示例代码)

2023-11-11

通过一个小实例来实现数据库更新后,推送消息给前台,让前台进行相应操作。

需求

数据库更新之后服务器推送消息给前台,让前台做操作。(数据库的数据不是由服务器写入的)

实现的话说到底都是用轮询,因为数据库的数据不是通过后台插入更新的,所以无论用什么办法,都需要循环地去读取数据库中的信息或者数据库的日志文件。区别就是,到底是前台轮询,还是后台轮询了。

如果使用前台轮询,就是前台定期给后台发送请求,来对数据进行更新,用setInterval()就能实现。你F12看Network就能看到一会就有几十甚至几百个请求。。因为我也是第一次实现这样的功能,虽然对性能这方面没有什么研究,但是看到短时间内这么多请求还是觉得心慌慌。

所以想到了使用后台轮询,后台轮询的好处就是,前台不用一直发送请求给后台,而是等到后台发现数据更新了再提醒前台重新请求数据。这就需要用到WebSocket。

我们平常使用的http连接,都是只能客户端向服务器发送请求。

而WebSocket的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。

在查询资料的时候也查到可以用数据库的存储过程来实现,在存储数据的时候,调用Java的程序来进行通知。(因为还有一些处理方面的问题没有去实现)

环境

Server version : Apache Tomcat/7.0.69

Java version: 1.7.0_80

需要引入的jar包:tomcat自带的tomcat7-websocket.jar和websocket-api.jar,这两个jar包都在tomcat安装目录的lib文件夹下。

需要注意的是:tomcat需要7.0.47版本以上才支持JSR-356,具体文档可以查看

思路

在建立连接的时候开启一个线程对数据库中的数据进行轮询,如果查询到数据变化了,就发消息给WebSocket实现类,实现类接收到消息后,推送消息给连接着的用户。

(如果数据是通过后台添加的,就不用这么麻烦了,直接在添加数据的操作类中发送消息给WebSocket实现类就好了)

客户端代码

这部分比较简单,就是通过url来建立WebSocket连接,协议名称ws也就是WebSocket。在websocket.onmessage()方法中对接收到的消息进行处理,你可以做输出也可以更新页面等等。

var websocket = null;//判断当前浏览器是否支持WebSocket

if (\'WebSocket\' inwindow) {//建立连接,这里的/websocket ,是Servlet中注解中的那个值

websocket = new WebSocket("ws://localhost:8080/项目名/websocket");

}else{

alert(\'当前浏览器 Not support websocket\');

}//连接发生错误的回调方法

websocket.onerror = function() {

console.log("WebSocket连接发生错误");

};//连接成功建立的回调方法

websocket.onopen = function() {

console.log("WebSocket连接成功");

}//接收到消息的回调方法

websocket.onmessage = function(event) {

console.log(event.data);if(event.data=="1"){

console.log("数据更新啦");

}

}//连接关闭的回调方法

websocket.onclose = function() {

console.log("WebSocket连接关闭");

}//监听窗口关闭事件,当窗口关闭时,主动去关闭WebSocket连接,防止连接还没断开就关闭窗口,server端会抛异常。

window.onbeforeunload = function() {

closeWebSocket();

}//关闭WebSocket连接

functioncloseWebSocket() {

websocket.close();

}

服务器端代码

在开启连接的时候启动了一个线程,关闭连接的时候调用线程的stopMe()方法,终止线程。当接收到消息的时候,调用sendMessage()方法给所有连接着的用户发送消息。

需要注意的是,一旦建立了连接,就会创建一个session,这个session和request中的session不一样,但是可以用类似的想法来理解。所以在发送消息的时候也需要调用session的方法来给连接着的用户发送消息。

WebSocket session发送文本消息有两个方法:getAsyncRemote()和getBasicRemote(),这两个方法我只是简单了解了一下,前者是异步发送消息,后者是同步发送消息。也就是说getBasicRemote()要等上一条消息发送完才能发送下一条消息。如果有错误的话希望大家指出!

在文档中我们看到也可以在服务器端接收消息的时候也可以直接在onMessage()方法中return txt.toUpperCase()来发送消息给消息发送方,但是在这个例子中,我们的消息是线程发送给WebSocket实现类的,所以不用这个方法。

//在相对路径中发布端点websocket

@ServerEndpoint("/websocket")public classWebSocketServlet {

MyThread thread1=newMyThread();

Thread thread=newThread(thread1);//用来存放每个客户端对应的MyWebSocket对象。

private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet();private javax.websocket.Session session=null;/*** @ClassName: onOpen

* @Description: 开启连接的操作*/@OnOpenpublic void onOpen(Session session) throwsIOException{this.session=session;

webSocketSet.add(this);

System.out.println(webSocketSet);//开启一个线程对数据库中的数据进行轮询

thread.start();

}/*** @ClassName: onClose

* @Description: 连接关闭的操作*/@OnClosepublic voidonClose(){

thread1.stopMe();

webSocketSet.remove(this);

}/*** @ClassName: onMessage

* @Description: 给服务器发送消息告知数据库发生变化*/@OnMessagepublic void onMessage(intcount) {

System.out.println("发生变化"+count);try{

sendMessage();

}catch(IOException e) {//TODO Auto-generated catch block

e.printStackTrace();

}

}/*** @ClassName: OnError

* @Description: 出错的操作*/@OnErrorpublic voidonError(Throwable error){

System.out.println(error);

error.printStackTrace();

}/*** 这个方法与上面几个方法不一样。没有用注解,是根据自己需要添加的方法。

*@throwsIOException

* 发送自定义信号,“1”表示告诉前台,数据库发生改变了,需要刷新*/

public void sendMessage() throwsIOException{//群发消息

for(WebSocketServlet item: webSocketSet){

item.session.getBasicRemote().sendText("1");

}

}

}

线程的定义

线程先对数据库中的数据查询一次,存在sum变量中,然后再一直对数据库中的数据进行轮询,new_sum与sum不同的话就发送消息给WebSocket实现类。

public class MyThread implementsRunnable{private intsum;private intnew_sum;private boolean stopMe = true;public voidstopMe() {

stopMe= false;

}/*(non-Javadoc)

* @see java.lang.Runnable#run()*/

public voidrun() {

UrlDao urlDao=newUrlDao();

sum=urlDao.selectCount();

WebSocketServlet wbs=newWebSocketServlet();while(stopMe){

new_sum=urlDao.selectCount();if(sum!=new_sum){

System.out.println("change");

sum=new_sum;

wbs.onMessage(sum);

}try{

Thread.sleep(1000);

}catch(InterruptedException e) {//TODO Auto-generated catch block

e.printStackTrace();

}

}

}

}

测试

956b534dc8974197b0fc6fe0a8562f46.jpg

至此我的需求是大概完成了,因为是第一次写WebSocket和线程相关的实例,如果有问题希望大家可以指出!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

客户服务器显示例子,WebSocket实现数据库更新前台实时显示(示例代码) 的相关文章

  • 详解Mysql主键

    主键 对于关系表 有个很重要的约束 就是任意两条记录不能重复 不能重复不是指两条记录不完全相同 而是指能够通过某个字段唯一区分出不同的记录 这个字段被称为主键 对主键的要求 最关键的一点是 记录一旦插入到表中 主键最好不要再修改 因为主键是
  • Schedulis 普通版环境部署

    Schedulis 普通版环境部署 一 使用前置 请基于 Linux 操作系统操作 建议 CentOS 创建新用户 hadoop 并为该用户赋予 root 权限 用于部署schedulis 准备好 MySQL 版本5 5 的客户端和服务端
  • String s = new String("abc");产生了几个对象?

    对于这个问题 老套路先上代码 public class StringTest public static void main String args String s1 Hello String s2 Hello String s3 new
  • ZooKeeper在Spark的使用

    摘抄一段 ZooKeeper 官网的一句话 大意就是 ZooKeeper 为分布式应用提供了高效可靠的分布式协调服务 提供了统一命名服务 配置管理和分布式锁等分布式的基础服务 ZooKeeper is a centralized servi
  • 数据结构实验6:二叉树的遍历,深度计算,度为1的个数

    题目 1 实现二叉树前序 中序 后序遍历的递归算法 2 计算二叉树的深度 递归和非递归算法 3 统计二叉树度为1的节点个数 递归和非递归算法
  • JS使用及mysql 查询语句

    目录 1 javascript的使用方式1 2 js的使用方式2 3 js中定义变量以及数据类型划分 4 Js之运算符 5 js之流程控制语句 6 js事件编程的三要素 7 javascript中如何定义函数以及调用函数 8 js中Date
  • 请问VARCHAR2(128)能存多少个汉字?

    Q 请问VARCHAR2 128 能存多少个汉字 A 看看什么字符集 或者看单个汉字几个字节lengthb Q 请问怎样查看你所提出的两个问题 A oracle中length 与lengthb 区别 SQL gt select length
  • 多个数计算最大公约数与最小公倍数的模板

    这是道计算两个数的最大公约数与最小公倍数的题目 辗转相除法实现计算最大公约数 多个数的最大公约数 计算多个数的最大公约数的算法思路 计算前两个数是最大公约数 记为gcd 再计算gcd与第三个数的最大公约数 更新gcd为本次计算的最大公约数
  • 如何检查 Docker 镜像是否存在漏洞

    Docker 可以将应用程序及其依赖项打包到一个虚拟容器中 该容器可以在任何 Linux Windows 或 macOS 计算机上运行 这使应用程序可以在各种位置运行 例如本地 公共 请参阅分散计算 分布式计算和云计算 或私有云 在 Lin
  • 正规式和正则表达式的异同

    正规式的定义及使用方法 转自正规式 设 是有穷字母表 并定义辅助字母表 都是 上的正规式 它们所表示的正规集为 任何a是一个正规式 若a 它所表示的正规集为 a 如果R1和R2是正规式 它们表示的正规集分别为L1和L2 则 R1 R2 R1
  • 滤波电容容值与所滤噪声频率的关系

    去耦电容的选择不存在与频率的精确对应关系 理论上越大越好 但现实中所有器件都不是理想器件 不论何种电容 ESL ESR都是必然存在的 于是实际电容的频响曲线明显呈非线性 仅在一定频率区间内基本符合纯电容的理论计算结果 超出一定界限后就与理论
  • Chaincode之间调用

    API InvokeChaincode 可以一个chaincode中调用另外一个chaincode中的函数 两个chaincode需要安装在相同的peer结点中 如果只需要查询被调链码的世界状态 可以在不同通道中进行 如果涉及更新操作 两个
  • QT中为生成的exe运行文件添加图标

    1 准备好ico图标文件名字为test ico 最好放在和 pro文件同一个文件夹中 2 创建一个叫icon rc的文件 里面写上文本信息IDI ICON1 ICON test ico 保存好 3 在pro文件中添加代码 RC FILE i
  • 09.Javascript设计模式之装饰器模式----Decorator

    09 Javascript设计模式之装饰器模式 Decorator 首先 我非常遗憾的要说一声 我花了两个小时整理的关于装饰器模式的笔记 因为一个不可预期的故障 ADoc文档上传到服务器后 文件损坏了 文件毫无备份 难道是我的笔记中包含法律
  • 数据结构--线性表详解(一)

    这里写链接内容1 前言 线性表是最常用且是最简单的一种数据结构 形如 A1 A2 A3 An这样含有有限的数据序列 我们就称之为线性表 2 线性表的两种表示形式 顺序表示 其实就是数组 链表表示 3 线性表一般操作的介绍 线性表一般包含如下
  • Swift语法学习--实用函数&关键词

    文章目录 abs min max swap filter map reduce Defer guard let 自定义运算符 abs min max swap filter map reduce Defer guard let 自定义运算符
  • 人脸识别系统具有哪些管理功能

    人脸识别系统是一个具有名单管理 资源管理 布控管理 任务管理的多功能系统 主要功能有 1 名单管理 对名单库及库内名单进行管理 支持用户新增 修改 删除名单库 也可以对库内名单进行新增 修改 删除等动作 2 资源管理 对布控点及布控点内的人
  • [学习flex] 1.利用flex实现文字和谐小程序

    灵感来自于09平台dota1 游戏选手对喷时经常互飙国粹 问候对方全家 后来09平台进行了聊天和谐 不和谐的文字都会被 替换 今天我就就用flex实现类似的效果 话不多说上flex代码 脏话 printf 国粹 printf printf
  • BF算法与KMP模式匹配算法(画图详解,C语言实现)

    KMP算法 1 BF算法 1 1BF算法定义 1 2BF算法举例 1 3BF算法代码实现 1 4BF算法性能分析 2 KMP算法 2 1KMP算法与BF算法的区别 2 2求KMP算法next数组 2 3KMP算法的过程举例 2 4KMP算法

随机推荐

  • attr 和 prop 的区别介绍

    attr 和 prop 的区别介绍 对于 HTML 元素本身就带有的固有属性 在处理时 使用 prop 方法 对于 HTML 元素我们自己自定义的 DOM 属性 在处理时 使用 attr 方法 实例 1 a href https www r
  • Cesium设置时间类

    场景时钟类 export default class SceneClock viewer multiplier constructor viewer this viewer viewer 设置场景时钟 param start 开始时间 pa
  • vue+cesium汉化包

    把这个js放进你的项目里面然后调用就可以 我这个是vue项目 然后运用的是es6的导出语法 cesium 可视化部分的中文汉化 包含内容如下 1 汉化方式非从源码层面进行 而是外挂了一个插件执行 使用方便 但是汉化程度不深 只汉化了cesi
  • Introducing Language Guidance in Prompt-based Continual Learning

    本文是LLM系列文章 针对 Introducing Language Guidance in Prompt based Continual Learning 的翻译 基于提示的持续学习中引入语言指导 摘要 1 引言 2 相关工作 3 背景
  • IDE 之 Eclipse安装

    目录 前言 一 Eclipse是什么 二 Eclipse优缺点 1 优点 2 缺点 三 安装Eclipse 1 官方下载Eclipse 2 安装Eclipse 3 运行eclipse 3 1 进入欢迎页面 前言 对于学习java的人来说 E
  • PTA(浙大版《C语言程序设计(第3版)》题目集)习题6-4 使用函数输出指定范围内的Fibonacci数 (20 分)

    PTA 浙大版 C语言程序设计 第3版 题目集 习题6 4 使用函数输出指定范围内的Fibonacci数 20 分 本题要求实现一个计算Fibonacci数的简单函数 并利用其实现另一个函数 输出两正整数m和n 0
  • [科普] 狭义相对论

    本文转载至 http www dlkp gov cn keputiandi universe article dispArticle Asp ID 58 第一章 狭义相对论 一 狭义相对论思想的根源 1 法拉第 麦克斯维将电磁学推向 场 的
  • 支付宝小程序框架分析

    支付宝小程序框架逆向分析 本文对支付宝小程序的正向开发做了简单介绍 并从正向开发的文件类型入手 对小程序的宿主框架进行了逆向分析 包括运行机制 通信模型以及安全防护体系等内容 代码开发 支付宝小程序开发在语法方面与传统的前端网页开发非常类似
  • Python——发送邮件

    一 smtplib模块 主要通过SMTP类与邮件系统进行交互 使用方法如下 1 实例化一个SMTP对象 s smtplib SMTP 邮件服务地址 端口号 s smtplib SMTP SSL 邮件服务地址 端口号 2 登陆邮件 权限验证
  • Linux:全志H3图像codec使用笔记

    1 前言 限于作者能力水平 本文可能存在谬误 因此而给读者带来的损失 作者不做任何承诺 2 图像 codec 概述 图像编解码器 codec 包含 Encoder 和 Decoder 两部分功能 我们用下列分别说明 Encoder 和 De
  • 解决window平台下cocos creator 构建发布面板打开后无法显示问题

    项目场景 creator构建发布界面 问题描述 window平台下cocos creator 构建发布面板打开后无法显示 原因分析 项目的配置文件目录setting和local目录内容混乱可能会导致该问题 这时候后重装creator也是没用
  • 设计模式全解析(一)——带你搞懂设计模式

    各位朋友 一提到 设计模式 四个字 是不是有一种若隐若现的朦胧感 我知道设计模式 我知道单例 工厂 观察者 策略 但是设计模式到底是什么呢 解决了什么问题呢 接下来我会一步一步解析一下设计模式 以及各个不同的设计模式到底要做的是什么 我们先
  • Octave的一些基本操作和语法,快速上手Octave,用实例解释

    基本语法 1 直接计算 gt gt 1 2 ans 3 2 变量计算 在最后加上分号 可以不输出结果 gt gt a 1 gt gt b 2 gt gt a b ans 3 3 矩阵赋值 gt gt a 1 2 3 4 5 6 a 1 2
  • Java实现五子棋小游戏(附源码)

    一 效果展示 二 游戏介绍 五子棋 是一种两人对弈的纯策略型棋类游戏 棋具与围棋通用 是起源于中国古代的传统黑白棋种之一 发展于日本 流行于欧美 容易上手 老少皆宜 而且趣味横生 引人入胜 不仅能增强思维能力 提高智力 而且富含哲理 有助于
  • [ Linux ] 静态代码检测工具 —— Cppcheck工具

    文章目录 cppcheck工具介绍 Linux安装 linux使用示例 在makefile中添加cppcheck工具实例 cppcheck工具介绍 什么是静态代码检查 静态代码检查是指在不运行程序的条件下 进行程序分析的方法 有些程序分析需
  • Git 分支管理策略汇总

    原文链接 Git 分支管理策略 最近 团队新入职了一些小伙伴 在开发过程中 他们问我 Git 分支是如何管理的 以及应该怎么提交代码 我大概说了一些规则 但仔细想来 好像也并没有形成一个清晰规范的流程 所以查了一些资料 总结出下面这篇文章
  • 企业如何制定实施MES管理系统的预算方案

    随着制造业的不断发展 MES生产管理系统逐渐成为制造企业提高生产效率 优化资源利用和提升质量水平的重要工具 制定实施MES管理系统的预算方案是企业在进行MES选型和实施时必须考虑的问题 本文将介绍制定实施MES管理系统预算方案的关键步骤 包
  • Nginx常用功能(配置静态资源)

    Nginx配置静态资源 背景 现场业务系统域名均由nginx转发 需求 通过nginx设置静态访问页面 操作如下 1 将静态文件存放在 opt nginx html 下 2 修改nginx conf文件 引用此静态文件 server lis
  • python爬虫爬取使用Ajax请求的网站数据解析——以梅老板微博为例(m.weibo.cn)

    文章目录 前言 什么是Ajax Ajax基本原理 发送请求 解析内容 渲染网页 Ajax分析方法 查看请求 过滤请求 Ajax结果提取 1 分析请求 since id解析 2 分析响应 3 爬取微博数据 后记 前言 前面学习了使用正则表达式
  • 客户服务器显示例子,WebSocket实现数据库更新前台实时显示(示例代码)

    通过一个小实例来实现数据库更新后 推送消息给前台 让前台进行相应操作 需求 数据库更新之后服务器推送消息给前台 让前台做操作 数据库的数据不是由服务器写入的 实现的话说到底都是用轮询 因为数据库的数据不是通过后台插入更新的 所以无论用什么办