精华内容
下载资源
问答
  • 大客户端可以发送消息到小客户端,并且大客户端可以发送“jump”命令到小客户端控制小客户端页面跳转到百度。其中系统管理页面记录所有大端与小端发送的消息,以及大端与小端的id。
  • 一个用户下建立多个连接,例如:一个用户开启多个网页,每个网页都建立一个socket连接。 最终表现: 用户的多个页面,能收到统一的消息: 具体使用方式: 前端 客户端页面使用 http://www.websocket-test.com/ 与...

    目的:

    一个用户下建立多个连接,例如:一个用户开启多个网页,每个网页都建立一个socket连接。

    最终表现:

    用户的多个页面,能收到统一的消息:

    具体使用方式:

    项目地址:
    https://gitee.com/brinjaul/fjpdemo.git

    前端

    客户端页面使用 http://www.websocket-test.com/ 与项目建立连接,充当web客户端

    注意下图的红框中是我们服务段地址,其中 /websocket/fjp 是我们服务端注解里的
    在这里插入图片描述

    @ServerEndpoint("/websocket/{userId}")
    

    {userId} 类似于SpringMVC中的 @PathVariable(“param”) 的使用方式,即,restful风格形式的动态传传参

    或者使用项目里配置的,WebSocketTest.html,与服务端页面交互。

    后端:

    代码:

    package com.fjp.websocket;
    
    import java.io.IOException;
    import java.util.concurrent.ConcurrentHashMap;
    import java.util.concurrent.CopyOnWriteArraySet;
    
    import javax.websocket.*;
    import javax.websocket.server.PathParam;
    import javax.websocket.server.ServerEndpoint;
    
    /**
     * @ServerEndpoint 注解是一个类层次的注解,它的功能主要是将目前的类定义成一个websocket服务器端,
     * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
     */
    @ServerEndpoint("/websocket/{userId}")
    public class WebSocketTest {
    
        private static ConcurrentHashMap<String, CopyOnWriteArraySet<WebSocketTest>> userwebSocketMap = new ConcurrentHashMap<String, CopyOnWriteArraySet<WebSocketTest>>();
    
        private static ConcurrentHashMap<String, Integer> count = new ConcurrentHashMap<String, Integer>();
    
        private String userId;
    
    
        /*
         * 与某个客户端的连接会话,需要通过它来给客户端发送数据
         */
        private Session session;
    
        /**
         * 连接建立成功调用的方法
         *
         * @param session 可选的参数。session为与某个客户端的连接会话,需要通过它来给客户端发送数据
         */
        @OnOpen
        public void onOpen(Session session, @PathParam("userId") final String userId) {
            this.session = session;
            this.userId = userId;
            if (!exitUser(userId)) {
                initUserInfo(userId);
            } else {
                CopyOnWriteArraySet<WebSocketTest> webSocketTestSet = getUserSocketSet(userId);
                webSocketTestSet.add(this);
                userCountIncrease(userId);
            }
            System.out.println("有" + userId + "新连接加入!当前在线人数为" + getCurrUserCount(userId));
        }
    
    
        /**
         * 连接关闭调用的方法
         */
        @OnClose
        public void onClose() {
            CopyOnWriteArraySet<WebSocketTest> webSocketTestSet = userwebSocketMap.get(userId);
            //从set中删除
            webSocketTestSet.remove(this);
            //在线数减1
            userCountDecrement(userId);
            System.out.println("有一连接关闭!当前在线人数为" + getCurrUserCount(userId));
        }
    
        /**
         * 收到客户端消息后调用的方法
         *
         * @param message 客户端发送过来的消息
         * @param session 可选的参数
         */
        @OnMessage
        public void onMessage(String message, Session session) {
            CopyOnWriteArraySet<WebSocketTest> webSocketSet = userwebSocketMap.get(userId);
            System.out.println("来自客户端" + userId + "的消息:" + message);
            //群发消息
            for (WebSocketTest item : webSocketSet) {
                try {
                    item.sendMessage(message);
                } catch (IOException e) {
                    e.printStackTrace();
                    continue;
                }
            }
        }
    
        /**
         * 发生错误时调用
         *
         * @param session
         * @param error
         */
        @OnError
        public void onError(Session session, Throwable error) {
            System.out.println("发生错误");
            error.printStackTrace();
        }
    
        /**
         * 这个方法与上面几个方法不一样。没有用注解,是根据自己需要添加的方法。
         *
         * @param message
         * @throws IOException
         */
        public void sendMessage(String message) throws IOException {
            this.session.getBasicRemote().sendText(message);
            //this.session.getAsyncRemote().sendText(message);
        }
    
    
        public boolean exitUser(String userId) {
            return userwebSocketMap.containsKey(userId);
        }
    
        public CopyOnWriteArraySet<WebSocketTest> getUserSocketSet(String userId) {
            return userwebSocketMap.get(userId);
        }
    
        public void userCountIncrease(String userId) {
            if (count.containsKey(userId)) {
                count.put(userId, count.get(userId) + 1);
            }
        }
    
    
        public void userCountDecrement(String userId) {
            if (count.containsKey(userId)) {
                count.put(userId, count.get(userId) - 1);
            }
        }
    
        public void removeUserConunt(String userId) {
            count.remove(userId);
        }
    
        public Integer getCurrUserCount(String userId) {
            return count.get(userId);
        }
    
        private void initUserInfo(String userId) {
            CopyOnWriteArraySet<WebSocketTest> webSocketTestSet = new CopyOnWriteArraySet<WebSocketTest>();
            webSocketTestSet.add(this);
            userwebSocketMap.put(userId, webSocketTestSet);
            count.put(userId, 1);
        }
    
    }
    
    
    

    WebSocketTest 类相当于Controller,@ServerEndpoint("/websocket/{userId}") 访问的

    核心思想,使用rest 风格动态变化用户id,每个用户建立一次连接的session要保存到容器中,保证每个用户享有自己的session记录表。

    后端 推送给前端的数据 ,我们用一个页面来实现,WebSocketTest.html ,即服务端要发送的数据通过这个页面输入,然后 端收到后 发给 客户端 http://www.websocket-test.com/ 页面

    动态效果图: 请点击

    https://gitee.com/brinjaul/fjpdemo/blob/master/JavaWebSocket/doc/%E6%A8%A1%E7%B3%8A%E7%9A%84%E5%8A%9F%E8%83%BD%E6%BC%94%E7%A4%BA%E5%8A%A8%E5%9B%BE.gif
    上传不了那么大的图片,就保留在码云了

    项目地址:
    https://gitee.com/brinjaul/fjpdemo.git

    展开全文
  • Springboot多连接池+websocket,相关详细技术说明可进入我的CSDN看博文哦~~如果有问题可在csdn上留言或者通过QQ694335719联系
  • websocket开启多个页面访问同一个连接会失效的问题解决方法 对于该问题的解决方案我们提供两种,我们选择第二种; 第一种: 在网页中使用iform标签,将需要连接页面在同一个界面处理。 第二种: 直接在后端处理...

    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);
    		}
    	}
    
    	/**
    	 * 处理连
    展开全文
  • 使用以下代码的情况下,只能开启一个websocket连接,如果开启了多个数据就不对了 var socketTask1 = wx.connectSocket({//打开websocket连接 url: 'wss://test.com/ws1', success: function (resConnect) {//...

    使用以下代码的情况下,只能开启一个websocket连接,如果开启了多个数据就不对了

    var socketTask1 = wx.connectSocket({//打开websocket连接
          url: 'wss://test.com/ws1',
          success: function (resConnect) {//打开连接成功
            console.log(resConnect)
            wx.onSocketOpen(function (resOpen) {
              console.log(resOpen)
              wx.sendSocketMessage({//发送消息
                data: JSON.stringify({
                  number: '123'
                }),
                success: function (resSend) {
                  console.log(resSend)
                },
                fail: function (resSendError) {
                  console.log(resSendError)
                }
              })
            })
            wx.onSocketMessage(function (resMessage) {//接收返回消息
              console.log(resMessage.data)
            })
            wx.onSocketError(function (resError) {//出现错误
              console.log(resError)
            })
            wx.onSocketClose(function (resClose) {//连接关闭
              console.log(resClose)
            })
          },
          fail: function (resConnectError) {//打开连接失败
            console.log(resConnectError)
          }
        })
    
    var socketTask2 = wx.connectSocket({//打开websocket连接
          url: 'wss://test.com/ws2',
          success: function (resConnect) {//打开连接成功
            console.log(resConnect)
            wx.onSocketOpen(function (resOpen) {
              console.log(resOpen)
              wx.sendSocketMessage({//发送消息
                data: JSON.stringify({
                  number: '234'
                }),
                success: function (resSend) {
                  console.log(resSend)
                },
                fail: function (resSendError) {
                  console.log(resSendError)
                }
              })
            })
            wx.onSocketMessage(function (resMessage) {//接收返回消息
              console.log(resMessage.data)
            })
            wx.onSocketError(function (resError) {//出现错误
              console.log(resError)
            })
            wx.onSocketClose(function (resClose) {//连接关闭
              console.log(resClose)
            })
          },
          fail: function (resConnectError) {//打开连接失败
            console.log(resConnectError)
          }
        })

    如果要同时开启多个websocket,可以这样写:

        var ws1 = wx.connectSocket({//打开websocket连接
          url: 'wss://test.com/ws1',
          success: function (resConnect) {//打开连接成功
            // console.log(resConnect)
            
          },
          fail: function (resConnectError) {//打开连接失败
            // console.log(resConnectError)
          }
        })
        ws1.onOpen(function(res){
          if (ws1.readyState === 1){
            ws1.send({
              data: JSON.stringify({
                number: '123',
              }),
              success: function (resSend) {
                // console.log(resSend)
    
              },
              fail: function (resSendError) {
                // console.log(resSendError)
              }
            })
          }
        })
    
        ws1.onMessage(function (data) {
          console.log(data.data)
        })
    
        var ws2 = wx.connectSocket({//打开websocket连接
          url: 'wss://test.com/ws2',
          success: function (resConnect) {//打开连接成功
            // console.log(resConnect)
            
          },
          fail: function (resConnectError) {//打开连接失败
            // console.log(resConnectError)
          }
        })
        ws2.onOpen(function(res){
          if (ws2.readyState === 1){
            ws2.send({
              data: JSON.stringify({
                number: '234',
              }),
              success: function (resSend) {
                // console.log(resSend)
    
              },
              fail: function (resSendError) {
                // console.log(resSendError)
              }
            })
          }
        })
    
        ws2.onMessage(function (data) {
          console.log(data.data)
        })

    参考文档:https://developers.weixin.qq.com/miniprogram/dev/api/network/websocket/SocketTask.html

    展开全文
  • 本人最近做一个需求,需要涉及同一个浏览器多个页签共享一个Websocket连接实现方案,有相关经验大神给予指点?
  • 因为是二手商品系统&#...我想在任何一个界面都能保持同一个仅有一个websocket的长连接, 我用的后端框架是SSM,前端是JSP。vue没学过。 我毕业设计就差这一个功能了,连方向往那走都不知道。</p>
  • JavaScript 同时建立多个websocket连接

    千次阅读 2019-07-16 06:05:00
    程序源码如下: ... //websocket对象数组 //创建socket连接功能函数 function connect(wsobj) { //浏览器支持? if ("WebSocket" in window) { var host = "ws://目标地址:目标IP/" ...

    程序源码如下:

    var socket=[]; //websocket对象数组

    //创建socket连接功能函数
    function connect(wsobj) {
    //浏览器支持?
    if ("WebSocket" in window)
    {
    var host = "ws://目标地址:目标IP/"
    socket[wsobj]= new WebSocket(host);

    try {
    //连接事件
    socket[wsobj].onopen = function (msg) {
    // alert(wsobj+":连接已建立!");
    };
    //错误事件
    socket[wsobj].onerror =function (msg) {
    alert("错误:"+msg.data);

    }

    //消息事件
    socket[wsobj].onmessage = function (msg) {
    //alert(wsobj+"消息接收:"+msg.data);
    if (typeof msg.data == "string") {
    alert(dev+":文本消息");
    }
    else {
    alert(dev+":非文本消息");
    }
    };
    //关闭事件
    socket[wsobj].onclose = function (msg)
    {

    alert(wsobj+":socket closed!")

    };
    }
    catch (ex) {
    log(ex);
    }


    }else
    {
    // 浏览器不支持 WebSocket
    alert("您的浏览器不支持 WebSocket!");
    }



    }

    //创建多个websock连接
    function StartConn() {
    //这里创建5个连接
    for(var i=0;i<=4;i++)
    {
    connect(i); //创建连接

    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    我这里创建了5个websocket连接,并将5个连接对象存储于socket数组中,可以去数组中获取相应对象操作,代码根据自己需求做更改


    ---------------------

    转载于:https://www.cnblogs.com/liyanyan665/p/11192633.html

    展开全文
  • 如何实现websocket多页面连接

    千次阅读 2019-05-23 17:55:04
    然后不用时直接销毁掉,这是一种办法,但是随之而来会导致一个项目多页面创建了多个websocket对象,这样肯定对违背数据请求和性能优化,那么在只创建一个websocket的情况下如何实现多页面的长连接呢? 1 通过iframe...
  • websocket(多个客户端)

    千次阅读 2020-11-02 23:49:50
    现很网站为了实现即时通讯,所用到的技术是轮询polling,使用websocket,浏览器和服务器只要做一个握手的动作,在两者之间形成快速通道 实时通讯,可以保持与客户端的长连接 节省资源:互相沟通的header大概2Bytes...
  • Websocket合并,解决页面多个websocket连接问题 背景 1. 打开首页会发起多次websocket连接,每个都调用后端各自的websocket进行; 2. 其他子页面是嵌套在主页里的,打开子页面会发起子页面里的websocket连接; 3. ...
  • 正在做毕业设计,需要做一个在线客服的功能,由于在网上关于websocket的demo太入门了,只好自己琢磨,可能资质问题,花了两天时间织写了一个简单的聊天页面,只能发文字。 服务端是用java写的,服务器用的是tomcat8...
  • 缺点 需要服务端的支持才能...第一步,新建一个文件夹 webSocket。 第二步,初始化 webSocket 文件夹, 使用 npm init 下载 package.json 文件。 第三步,使用 npm install --save ws 安装模块。 第四步,在 web..
  • err := c.WriteMessage(websocket.CloseMessage, websocket.FormatCloseMessage(websocket.CloseNormalClosure, "")) if err != nil { log.Println("write close:", err) return } select { case <-done: ...
  • 微信小程序/WEB/App三端实现单个/多个websocket连接 传统的http协议只能由客户端发起请求拿数据,并不能由服务器发起数据推送,websocket可以在不发送请求的情况下,服务器主动给客户端推送数据 基于浏览器和设备所...
  • 当然,这篇文章不是WebSocket的科普文,按照惯例:强哥出品,必属精品的原则(哈哈,自吹波)。我们就不在这里介绍WebSocket是什么以及如何在Springboot上使用了,大家有兴趣的可以自行百度。 当我们在后端项目.....
  • websocket:如何建立在同一台client和同一台server创建多个连接
  • 多个websocket连接处理--简易聊天…

    千次阅读 2013-12-30 20:43:44
    该程序可以实现多个用户之间(多个浏览器)之前的聊天功能,比如打开火狐,Opera,chrome,再其中每一个当中输入内容,另外的两个都会收到发布的内容,但是不能显示是谁发的信息,下一步我...多个websocket通信的实例 r
  • 最近早做一个外卖的小程序,碰到一个需求,多人下单,为了保证堂食同桌的每个人实时获取到每个人点菜信息,所以使用websocket,小程序也提供了socket的API。 自己封装的socket.io.js文件: const callback=()=>...
  • 原文地址 https://www.seoxiehui.cn/article-207317-1.html
  • 通过websocket的session.getSessionId()与oldSession.getSessionId()来equals判断是否是新窗口。 如果不同不让链接。 问题1.虽然新来的链接连不上,但是如果原窗口的链接断线重连也会认为是新socket,也会被禁止...
  • Websocket如何实现长连接

    千次阅读 2019-12-02 11:30:25
    由于websocket连接成功过段时间自动关闭,无法继续获取消息 于是我就想到一个办法,就是自动关闭时再重新创建一次(因为自动关闭也不是很快就关闭的,所以我就这么写),虽然实现方式不是很好,但是也暂时的实现了长...
  • 本篇博客介绍微信小程序中webSocket的使用方法,以及如何用局部网络建立webSocket连接,进行客户端与服务器之间的对话: webSocket简介 微信小程序端API调用 服务器端使用nodejs配置 演示websocket webSocket...
  • maven导入依赖 <dependency> <groupId>org.springframework</groupId>...spring-websocket</artifactId> <version>4.3.12.RELEASE</version> </depe...
  • websocket 连接方法

    2018-08-21 10:53:21
    WebSocket协议支持(在受控环境中运行不受信任的代码的)... 该技术的目标是为基于浏览器的、需要和服务器进行双向通信的(服务器不能依赖于打开多个HTTP连接(例如,使用XMLHttpRequest或&lt;iframe&gt;...
  • 最近在做一个数据大屏需要用websocket需要推送数据 写好websocket以后测试一直连接失败,但是后台没有反应,在网上查了很资料都没有解决 最后查了好久发现websocket的请求受到拦截器的影响,添加白名单就可以了,网上...
  • 屏互动事实上是一个比较宽泛的概念,通俗来讲就是用户在不同的终端上通过有线、无线的连接方式进行通信,可进行多媒体(音频,视频,图片)内容的传输,解析,展示,控制等一系列操作。而随着WebSocket协议的诞生...
  • webSocket

    2019-12-12 15:25:47
    webSocket 1_首先创建动态Web项目 2_导入jar 3_创建BitCoinServer类 package com.kemeng.bitcoin; import java.io.IOException; import javax.websocket.OnClose; import javax.websocket.OnError; import ...
  • vue 是单页面的,在路由切换的时候,websocket的close()方法断开不了连接,不管是放在beforeDestroy()还是destroyed()里,打开网络监控的ws里发现它还是存在。然后我发现websocket在刷新页面后,会自己断开连接,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,267
精华内容 10,106
关键字:

一个页面多个websocket连接