精华内容
下载资源
问答
  • 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问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 大客户端可以发送消息到小客户端,并且大客户端可以发送“jump”命令到小客户端控制小客户端页面跳转到百度。其中系统管理页面记录所有大端与小端发送的消息,以及大端与小端的id。
  • Websocket跨域访问

    千次阅读 2020-04-07 01:50:52
    WebSocket 是 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>
    
    展开全文
  • 考虑到跨域和后期的在线交流的扩展,决定采用webSocket,加上系统本身是基于Spring的,就照着Spring的官方文档搭建了一个很简单的项目。基于maven搭建的,非常简单快捷,这里就不废话,直接进入主题: 整个项目结构...

    由于工作需求,需要搭建一个平台无关的web项目,用于收集其他系统的bug和建议。考虑到跨域和后期的在线交流的扩展,决定采用webSocket,加上系统本身是基于Spring的,就照着Spring的官方文档搭建了一个很简单的项目。

    基于maven搭建的,非常简单快捷,这里就不废话,直接进入主题:

    这里写图片描述
    整个项目结构就是这么简单,多的也不赘述了,等下会把这个项目的源码上传,大家可以看下,
    安装官方的指示搭建完之后发现不管怎么访问都是404。
    这几天也是查阅了无数的资源,百度了无数的问题。发现解决的方式都没有说到重点。
    但是,中间有个人说到了重点,

    webSocket请求实质上就是一个http请求,那么,肯定是要经过拦截器的,也就是需要在DispatchServlet里面进行配置拦截。

    然后如果是跨域的,一定要在配置访问地址的时候设置连接的域名地址,比如,下面会粘贴两个重点的地方:

    这里写图片描述

    这里写图片描述

    这是页面的请求地址:
    这里写图片描述

    所以,这样配置了之后你就发现没问题了;
    其实官方文档也提到了过,但是当时不太懂具体想表达什么,比如:
    这里写图片描述

    附件:
    1、官方文档:spring中文文档
    2、项目源码:下载地址

    那么故事到这里,就要结束了。

    To be continue!

    展开全文
  • 请教一下大神,是我的配置存在问题,还是访问websocket本身不支持通过欢迎页面访问(web服务器用的tomcat),如果是不支持的话,请问,通过什么方式能做到“通过访问项目根路径来访问websocket服务”,主要是为了...
  • 一般会使用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:25
    websocket前端访问客户端demo,HTML5 WebSocket WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单
  • 首先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通知的方式实现 思路: 当页面数据修改时,会通过后端保存方法存进数据库,这样我们就要一个...
  • 基于Redis服务发布订阅功能,实现系统有新数据的时候主动推送数据到大屏的WebSocket监听页面进行展示。队列的消费需要提供接口这个方式不够友好,发布订阅只需要在另一个服务器上同样部署一个springboot开发的应用并...
  • 最近自己的服务器需要上上线一个websocket服务,本地测试什么的都是正常的,知道上线的时候,发现报了如下错误 从图中可以发现,如果内嵌websocket的站点是https加密的,则需要使用wss协议,而不是ws协议。毫无疑问...
  • Chrome 可能会抛出错误 400,因为它认为您正在尝试对 websocket 服务器进行跨域请求,并且认为您不太可能获得许可。要解决这个问题,您也只需从您的go-server为您的 html 提供服务。因此,将您的sock.go代码更改为:...
  • java 采用Websocket实现web实时通讯功能,包括mysql数据库文件与视频
  • webSocket运用

    千次阅读 2021-11-24 18:15:49
    xml中webSocket的jar config开启WebSocket支持 websocket 访问页面的controller 实现效果 刚连接的时候 当接到消息的时候 说明 简单的搭建webSocket,并运用,可以实现当中间件或者redis订阅来消息的时候能够实时的...
  • WebSocket

    2022-04-13 11:44:27
    java websocket
  • 项目易用易懂,我之前用有些是组件是要收费的,所以我才做了这个来使用并分享出来,正在项目使用当中 本实例用winform做服务端,也可以自行改造成控制台服务端,有一个web.html作为客户端通过js与服务端建立socket...
  • 代替ocx、ppapi、npapi等通过web页面访问本地资源的插件方式,页面需支持HTML5。使用c#编写websocket服务端,使用vue编写的客户端,在一台电脑上实现vue发起访问指令,通过websocket协议访问本机websocket服务,...
  • thymeleaf :用于thymeleaf测试页面模板 MyBatis :用于访问MySQL数据库,实现用户登录功能 环境依赖 JDK8+ MySQL5.7+ Redis集群 三个子项目说明 sample-websocket :最基础的demo项目,包含:使用Java提供的@...
  • 我的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 手机谷歌访问不了 手机谷歌一访问就执行onerror 我是加个if判断就可以访问了 不知道是为什么 遇到同样问题的小伙伴可以试下 if (!this.websocket) { this.websocket = new ...
  • --websocket--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <...
  • webSocket实现例子

    2018-01-19 14:49:41
    JAVA语言开发。完整的实例,部署环境tomcat7,jdk1.8,实现webscoket的一个例子。内有相关的jar包和说明(包括项目运行后的页面访问地址)。请放心下载,如有问题,请留言
  • 对此,一般的做法是用setTimeout()或setInverval()定时执行任务,任务内容是Ajax访问一次服务器,并在成功拿到返回数据后去更新页面。 这种定时刷新的做法会有这样一些感觉不足的地方: 频繁的定时网络请求对浏览器...
  • Websocket 访问服务 一种利用 websockets 提供用户身份验证的非传统访问服务。 介绍 Websocket 访问服务使用和共享密钥来接受或拒绝对资源的访问。 它旨在与现有的多通道消息传递中心(如但也可与其他消息传递系统...
  • websocket

    2022-04-16 14:32:14
    文章目录什么是websocket?HTTP与WebSocket的关系快速入门SpringBoot+WebSocket 实时监控异常消息 什么是websocketWebSocket 协议是基于 TCP 的一种新的网络协议。 它实现了客户端与服务器之间的全双工通信,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,194
精华内容 10,877
关键字:

websocket页面访问