-
2021-04-20 16:13:42
websocket开启多个页面访问同一个连接会失效的问题解决方法
对于该问题的解决方案我们提供两种,我们选择第二种;
第一种:
在网页中使用iform标签,将需要连接的页面在同一个界面处理。
第二种:
直接在后端处理session,因为每次打开页面都需要重新连接,那么我们在后端就处理每次的连接请求,每次有新的连接接入就从新加入,这样在每个页面都能接收到消息啦。/** * 建立连接后,把登录用户的id * 写入WebSocketSession */ @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { Integer uid = Integer.parseInt(session.getAttributes().get("uid").toString()); log.info("----------------------------------"+uid+"号用户开始上线中----------------------------------"); if ( (USER_SOCKET_SESSION_MAP.get(uid) == null) || (USER_SOCKET_SESSION_MAP.get(uid)!=null && !session.equals(USER_SOCKET_SESSION_MAP.get(uid)))) { log.info("--------------------------------用户连接开始---------------------------"); handlerConnection(uid,session); } } /** * 处理连
更多相关内容 -
Spring集成webSocket页面访问404问题的解决方法
2020-08-28 14:33:20主要介绍了Spring集成webSocket页面访问404问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
websocket连接两个页面,一个页面控制另外一个页面跳转。
2016-03-25 13:36:22大客户端可以发送消息到小客户端,并且大客户端可以发送“jump”命令到小客户端控制小客户端页面跳转到百度。其中系统管理页面记录所有大端与小端发送的消息,以及大端与小端的id。 -
Websocket跨域访问
2020-04-07 01:50:52WebSocket 是 HTML5 开始提供的⼀种在单个 TCP 连接上进⾏全双⼯通讯的协议,可以实现跨域访问。 websocket安装命令 npm i ws -S 服务器端: let WebServerSocket = require("ws").Server; let wss = new ...WebSocket 是 HTML5 开始提供的⼀种在单个 TCP 连接上进⾏全双⼯通讯的协议,可以实现跨域访问。
websocket安装命令npm i ws -S
服务器端:let WebServerSocket = require("ws").Server; let wss = new WebServerSocket({port:8200}); const mysql = require("mysql2"); //数据库连接 let connection = mysql.createConnection({ host:"localhost", user:"root", password:"123", database:"firstdb", charset:"utf8" }); // websocket服务端 // 连接成功后,会执行回调函数返回一个ws参数 wss.on("connection",function(ws){ // 返回对象数据 let obj = { name:"mary", sex:"女" }; // 推送数据 setInterval(() => { //查询数据库中的信息并推送给页面 // 从mysql数据库中获取数据(待定) // let sql = "SELECT * FROM chat"; // let rows = connection.promise().query(sql); // ws.send(JSON.stringify(rows)); ws.send(JSON.stringify(obj)); }, 1000); //插入到数据中 ws.onmessage = function(data){ console.log(data); } // 错误信息 ws.onerror = function(error){ console.log(error); } // 关闭协议 // ws.close(); });
客户端:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>websocket主页</h1> 评论:<input type="text" clas s="ipt"> <button class="btn">推送数据到服务器</button> <script> // 同源写相对路径,不同源要写全称 // 同源: 协议 域名 端口号必须全部一致 // 非同源:跨域 // 客户端 let ws = new WebSocket("ws://localhost:8200"); //建立连接 ws.onopen = function () { //打开协议 console.log("连接成功"); } ws.onmessage = function (mes) { //发送数据到服务端 console.log(mes); } // ws.addEventListener("message", function (e) {}); document.querySelector(".btn").onclick = function () { let iptvalue = document.querySelector(".ipt").value; console.log("客户端发送给服务端的信息:" + iptvalue); ws.send(iptvalue); //如果服务端关闭协议后,即执行ws.close()后,此时会报错: WebSocket is already in CLOSING or CLOSED state. }; // 报错 426 Upgrade Required // 426是一种HTTP协议的错误状态代码,表示服务器拒绝处理客户端使用当前协议发送的请求,但是可以接受其使用升级后的协议发送的请求 // 我们设置的端口号是8200,直接在浏览器地址栏输入访问不了,使用visual studio code自带的服务器(Live Server)打开(跨域访问) // http://127.0.0.1:5500/mysqlTest/websocket/index.html // 或者http://localhost:5500/mysqlTest/websocket/index.html </script> </body> </html>
-
关于Spring集成webSocket,页面访问404问题
2017-03-25 12:50:11考虑到跨域和后期的在线交流的扩展,决定采用webSocket,加上系统本身是基于Spring的,就照着Spring的官方文档搭建了一个很简单的项目。基于maven搭建的,非常简单快捷,这里就不废话,直接进入主题: 整个项目结构...由于工作需求,需要搭建一个平台无关的web项目,用于收集其他系统的bug和建议。考虑到跨域和后期的在线交流的扩展,决定采用webSocket,加上系统本身是基于Spring的,就照着Spring的官方文档搭建了一个很简单的项目。
基于maven搭建的,非常简单快捷,这里就不废话,直接进入主题:
整个项目结构就是这么简单,多的也不赘述了,等下会把这个项目的源码上传,大家可以看下,
安装官方的指示搭建完之后发现不管怎么访问都是404。
这几天也是查阅了无数的资源,百度了无数的问题。发现解决的方式都没有说到重点。
但是,中间有个人说到了重点,webSocket请求实质上就是一个http请求,那么,肯定是要经过拦截器的,也就是需要在DispatchServlet里面进行配置拦截。
然后如果是跨域的,一定要在配置访问地址的时候设置连接的域名地址,比如,下面会粘贴两个重点的地方:
这是页面的请求地址:
所以,这样配置了之后你就发现没问题了;
其实官方文档也提到了过,但是当时不太懂具体想表达什么,比如:
附件:
1、官方文档:spring中文文档
2、项目源码:下载地址那么故事到这里,就要结束了。
To be continue!
-
javaweb在web.xml中配置欢迎页面为websocket服务访问地址,无法直接通过访问项目根路径来访问websocket
2019-12-18 16:40:42请教一下大神,是我的配置存在问题,还是访问websocket本身不支持通过欢迎页面访问(web服务器用的tomcat),如果是不支持的话,请问,通过什么方式能做到“通过访问项目根路径来访问websocket服务”,主要是为了... -
WebSocket页面推送技术(模拟实现群聊)
2020-06-22 22:01:19一般会使用Ajax来发送请求,但是,这样读取效率极低,而且实时性比较差,今天跟大家分享一下websocket页面推送技术,我们来模拟实现群聊。。。。。 这里我们使用spring boot勾选websocket依赖。 也可以手动导入依赖...我们之前的请求,大都数是从前端页面发起,Java后台对前端的信息进行处理再返回到前端页面。一般会使用Ajax来发送请求,但是,这样读取效率极低,而且实时性比较差,今天跟大家分享一下websocket页面推送技术,我们来模拟实现群聊。。。。。
这里我们使用spring boot勾选websocket依赖。
也可以手动导入依赖<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>
然后,代码中,创建这个对象,让它在IoC容器中
// 向IoC容器注册 @Configuration public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter(){ return new ServerEndpointExporter(); } }
接着使用WebSocket对象,定义各种行为的执行方式
//使用websocket具体操作 @ServerEndpoint("/websocket") //访问路径 @Component public class WebSocket { //会话,前后端建立的通道 private Session session; //会话的集合 使用时可能会打开多个会话通道 private static CopyOnWriteArraySet<WebSocket> webSockets=new CopyOnWriteArraySet<>(); //当建立websocket时就会执行以下方法 //开 @OnOpen public void onOpen(Session session){ this.session=session; webSockets.add(this); System.out.println("成功连接,现在共有"+webSockets.size()+"个连接"); } //关 @OnClose public void onClose(){ webSockets.remove(this); System.out.println("成功连接,现在共有"+webSockets.size()+"个连接"); } //信息处理----模拟多人聊天的群聊 @OnMessage public void onMessage(Session session,String msg){ //遍历会话 发送msg System.out.println("用户发送的信息是:"+msg); for (WebSocket webSocket:webSockets){ try { webSocket.session.getBasicRemote().sendText(msg); } catch (IOException e) { e.printStackTrace(); } } } }
页面上,对于后台功能的调用和监听
<div align="center"> <table> <tr> <td><input type="text" id="words"></td> </tr> <tr> <td><button onclick="fasong()">发送</button></td> </tr> <tr> <td> <div id="message"> 聊天窗口 </div> </td> </tr> </table> </div>
写一个脚本来进行调用和监听
<script type="text/javascript"> // 声明一个变量名websocket 初始化 var websocket=null; // 判断当前浏览器是否支持 if ('WebSocket' in window){ //alert("支持") websocket=new WebSocket("ws://localhost:8888/websocket") //WebSocket.java文件下的声明路径 }else { alert("不支持") } websocket.onopen=function (ev) { alert("连接成功!") } websocket.onclose=function (ev) { alert("连接关闭!") } //将信息放到页面的div---接收信息 websocket.onmessage=function (ev) { document.getElementById("message").innerHTML+='<br/>'+ev.data; } //发送信息 function fasong() { var msg=document.getElementById("words").value; websocket.send(msg); } </script>
我们对功能稍加完善,进入页面先输入姓名,在聊天窗口可以显示姓名,对聊天窗口加上样式,最终我们前端页面写成如下(freemarker模板,创建springboot项目时需要勾选):
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"> <head> <meta charset="UTF-8"> <title>Title</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> </head> <body> <script type="text/javascript"> // 声明一个变量名websocket 初始化 var websocket=null; // 判断当前浏览器是否支持 if ('WebSocket' in window){ //alert("支持") websocket=new WebSocket("ws://localhost:8888/websocket") //WebSocket.java文件下的声明路径 }else { alert("不支持") } websocket.onopen=function (ev) { alert("连接成功!") } websocket.onclose=function (ev) { alert("连接关闭!") } //将信息放到页面的div---接收信息 websocket.onmessage=function (ev) { document.getElementById("message").innerHTML+='<br/>'+ev.data; } //发送信息 function fasong() { var msg=document.getElementById("words").value; var name=document.getElementById("name").value; websocket.send(name+" : "+msg); } </script> <div align="center"> <h1>欢迎您,${name!}</h1> <input type="hidden" id="name" value="${name!}"> <table> <tr> <td><input type="text" id="words"></td> </tr> <tr> <td><button onclick="fasong()">发送</button></td> </tr> <tr> <td> <div id="message"> 聊天窗口 </div> </td> </tr> </table> </div> <style> #message{ /*padding: 20px;*/ height: 500px; width: 300px; border: 5px solid green; background-color: bisque; } </style> </body> </html>
登录输入姓名页面如下:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"> <head> <meta charset="UTF-8"> <title>Title</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> </head> <body> <div align="center"> <h2>迷你通信系统</h2> <form action="login"> <input type="text" name="name"><br> <input type="submit" value="输入用户名登录"> </form> </div> </body> </html>
controller层对数据进行处理:
@Controller // 初始化界面跳转到login.ftl public class Controller { @RequestMapping("/") public String init(){ return "login"; } // 讲用户名传到前端页面 @RequestMapping("/login") public String login(HttpServletRequest request,String name){ request.setAttribute("name",name); return "webSocket"; } }
application.properties配置server.port=8888 (springboot内置tomcat,设置端口号,默认8080)
我们打开两个浏览器进行测试,查看效果。
效果如下:
我们可以在前端看到直观的效果。再来看看后台的输出
共有两个连接,分别发送了不同的信息,显示在前端。来模拟出群聊的效果。。。。。
各位看官一日之思:赢得尊重,欣赏诚实,获取信任,归还忠诚!
祝各位好梦!! -
websocket前端Demo.zip
2019-09-06 10:21:25websocket前端访问客户端demo,HTML5 WebSocket WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单 -
spring boot+websocket实现直播访问人数不刷新页面实时更新
2020-09-15 19:32:56首先js: varsocket; if(typeof(WebSocket)=="undefined"){ console.log("您的浏览器不支持WebSocket"); ...console.log("您的浏览器支持WebSocket");...varsocketUrl="ws://127.0.0.1:端口/访问地... -
使用WebSocket解决页面数据实时同步
2018-11-20 11:06:21一个页面需要在不同的PC端访问,在某一PC端对网页内容发生改变时,其他PC端页面数据实时更新显示. 实现: 采用webSocket+AOP通知的方式实现 思路: 当页面数据修改时,会通过后端保存方法存进数据库,这样我们就要一个... -
SpringBoot 实现WebSocket页面消息推送及Redis 发布订阅和队列功能
2019-05-30 15:38:48基于Redis服务发布订阅功能,实现系统有新数据的时候主动推送数据到大屏的WebSocket监听页面进行展示。队列的消费需要提供接口这个方式不够友好,发布订阅只需要在另一个服务器上同样部署一个springboot开发的应用并... -
nginx教程:Nginx配置websocket的wss访问
2021-02-08 16:47:30最近自己的服务器需要上上线一个websocket服务,本地测试什么的都是正常的,知道上线的时候,发现报了如下错误 从图中可以发现,如果内嵌websocket的站点是https加密的,则需要使用wss协议,而不是ws协议。毫无疑问... -
静态html页面直接创建WebSocket连接golang服务器
2021-06-19 00:32:37Chrome 可能会抛出错误 400,因为它认为您正在尝试对 websocket 服务器进行跨域请求,并且认为您不太可能获得许可。要解决这个问题,您也只需从您的go-server为您的 html 提供服务。因此,将您的sock.go代码更改为:... -
jsp(Websocket) 实现web实时通讯
2017-12-14 14:22:06java 采用Websocket实现web实时通讯功能,包括mysql数据库文件与视频 -
webSocket运用
2021-11-24 18:15:49xml中webSocket的jar config开启WebSocket支持 websocket 访问页面的controller 实现效果 刚连接的时候 当接到消息的时候 说明 简单的搭建webSocket,并运用,可以实现当中间件或者redis订阅来消息的时候能够实时的... -
WebSocket
2022-04-13 11:44:27java websocket -
c#-websocket完整实例 html/javascript与服务端后台实时连接通讯 项目使用中
2020-04-24 11:46:35项目易用易懂,我之前用有些是组件是要收费的,所以我才做了这个来使用并分享出来,正在项目使用当中 本实例用winform做服务端,也可以自行改造成控制台服务端,有一个web.html作为客户端通过js与服务端建立socket... -
c#websocket服务与vue通讯
2018-11-28 13:21:40代替ocx、ppapi、npapi等通过web页面访问本地资源的插件方式,页面需支持HTML5。使用c#编写websocket服务端,使用vue编写的客户端,在一台电脑上实现vue发起访问指令,通过websocket协议访问本机websocket服务,... -
WebSocketDemo:在Spring Boot中使用WebSocket,示例包括简单模式,STOMP模式消息,处理对方不在线情况,...
2021-01-29 17:45:03thymeleaf :用于thymeleaf测试页面模板 MyBatis :用于访问MySQL数据库,实现用户登录功能 环境依赖 JDK8+ MySQL5.7+ Redis集群 三个子项目说明 sample-websocket :最基础的demo项目,包含:使用Java提供的@... -
android使用websocket无法访问cookie。
2021-06-05 13:11:33我的java服务端为了分清各个用户使用session里的用户名做了区分,html页面使用没有问题,但是在android端访问的时候取不到cookie值。public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse... -
搭建WebSocket
2021-12-01 18:07:42下载php扩展Swoole 在linux上边建个文件 ... <?...class socket { const LISTEN_SOCKET_NUM = 9; ... private $_ip = "0.0.0.0"; //ip 修改成 0.0.0.0 都可以访问 ... //端口 要和前端创建WebSocket连接时的端口号一致 . -
电脑谷歌浏览器可以访问webSocket 手机谷歌访问不了
2021-08-09 17:36:02电脑谷歌浏览器可以访问webSocket 手机谷歌访问不了 手机谷歌一访问就执行onerror 我是加个if判断就可以访问了 不知道是为什么 遇到同样问题的小伙伴可以试下 if (!this.websocket) { this.websocket = new ... -
webSocket 后台发送给前台消息,实现页面跳转消息提示
2020-09-09 18:00:33--websocket--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <... -
webSocket实现例子
2018-01-19 14:49:41JAVA语言开发。完整的实例,部署环境tomcat7,jdk1.8,实现webscoket的一个例子。内有相关的jar包和说明(包括项目运行后的页面访问地址)。请放心下载,如有问题,请留言 -
WebSocket的简单介绍及应用
2020-12-03 03:34:15对此,一般的做法是用setTimeout()或setInverval()定时执行任务,任务内容是Ajax访问一次服务器,并在成功拿到返回数据后去更新页面。 这种定时刷新的做法会有这样一些感觉不足的地方: 频繁的定时网络请求对浏览器... -
websocket-access-service:一种利用 websockets 提供用户身份验证的非传统访问服务
2021-06-21 07:38:47Websocket 访问服务 一种利用 websockets 提供用户身份验证的非传统访问服务。 介绍 Websocket 访问服务使用和共享密钥来接受或拒绝对资源的访问。 它旨在与现有的多通道消息传递中心(如但也可与其他消息传递系统... -
websocket
2022-04-16 14:32:14文章目录什么是websocket?HTTP与WebSocket的关系快速入门SpringBoot+WebSocket 实时监控异常消息 什么是websocket? WebSocket 协议是基于 TCP 的一种新的网络协议。 它实现了客户端与服务器之间的全双工通信,...