精华内容
下载资源
问答
  • 3. 想把前端和后端:一个页面内的多个websocket和其他子页面的websocket 合并成一个。 一. 前端页面合并 在首页创建一个websoclet连接,不同的websocket连接设定不同的type,在onopen方法里进行多次send(typ

    Websocket合并,解决页面多个websocket连接问题

    背景

    1. 打开首页会发起多次websocket连接,每个都调用后端各自的websocket进行;
    2. 其他子页面是嵌套在主页里的,打开子页面会发起子页面里的websocket连接;
    3. 想把前端和后端:一个页面内的多个websocket和其他子页面的websocket 合并成一个。

    一. 前端页面合并

    • 在首页创建一个websoclet连接,不同的websocket连接设定不同的type,在onopen方法里进行多次send(type,替代多个不同websocket发送不同类型消息的效果。
    var mysocket = null;
    function createWebsocket(){
    	var webUrl = window.location.host;
    	if('WebSocket' in window){
    		if(mysocket==null){
    			mysocket = new WebSocket("ws://${xxx}/xxx?type="+type);
    			mysocket.onopen = function(){
    			//可以把每个页面的websocket要传的参数设置成type的值
    				myscoket.send("type");
    				mysocket.send("type1");
    			}
    			mysocket.onmessage = function(msg){
    				//根据拿到的type执行不同的回调函数
    				var type = ($.paiseJSON(msg.data)).type;
    				if(type==xxx){
    				 	xxx;
    				}
    				if(type==xxx1){
    					xxx;
    				}
    			}
    			mysocket.onclose = function(){
    				alert("连接关闭")
    			}
    			mysocket.onbeforeunload = function(){
    				mysocket.close();
    			}
    		}else{
    			$.message.show({
    				title:'提示',
    				msg:'浏览器版本过低,系统不支持'
    			});
    		}
    }
    
    

    二.后端合并多个websocket

    > 根据前端传的type,onopen和onmessage方法里执行不同的方法

    @ServerEndpoint(value="/xxx/{param}",configurator = GetHttpSessionConfigurator.class)
    public class MyWebSocketServlet{
    	private static final long serivalVersionUID = xxx;
    	@OnOpen//客户端链接成功后讲其保存在线程安全的集合中
    	public void open(Session session,EdpointConfig config,@PathParam("param")String  param){
    		try{
    			param = (String)config.getUserProperties().get("type");
    		}catch(Exception e){
    			e.printStackTrace();
    		}
    		//根据页面传的type进行判断,执行方法
    		if(param.equals("xxx")){
    			HttpSession httpSession = (HttpSession)config.getUserPropertie().get(HttpSession.class.getName());
    			AuthUser user = (AuthUser)httpSession.getAttribute(Constans.LOGIN_USER);
    			MessageCenter.getInstance().addUserSession(session,user.getUsername());
    		}
    		if(param.equals("xxx1")){
    			xxx;
    		}
    	}
    	@OnMessage//给客户端发送消息
    	public void handlerMessage(String message,Sesion session){
    		//可以用startWith对message进行判断,然后执行对应的方法
    		if(message.startWith("xxx")){
    			xxx;
    		}
    	}		
    	
    	@OnClose//客户端断开链接后将其从线程安全的集合中移除
        public void onClose() {
            sessions.remove(this);
        }
    	@OnError
    	public void onError(Session session, Throwable error) {
    		log.error("发生错误");
    		error.printStackTrace();
    	}
    }
    

    思路大概就是这样,封装多个websocket,根据type进行动态的执行对应方法

    展开全文
  • 使用以下代码的情况下,只能开启一个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开启多个页面访问同一个连接会失效的问题解决方法 对于该问题的解决方案我们提供两种,我们选择第二种; 第一种: 在网页中使用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);
    		}
    	}
    
    	/**
    	 * 处理连接
    	 * @param uid
    	 * @param session
    	 */
    	private void handlerConnection(Integer uid, WebSocketSession session) {
    		//将数据存入map中
    		USER_SOCKET_SESSION_MAP.put(uid, session);
    		//设置用户的未读消息数量
    		Integer selectUsMsgCount = userMsgService.selectUsMsgCount(uid, null);
    		UserMsg msg = new UserMsg();
    		msg.setMsgType(0);//0表示上线消息未读消息查询
    		msg.setTitle("查询未读消息");
    		msg.setIsRead(false);
    		msg.setUserId(0);
    		msg.setReceiveUserId(uid);
    		msg.setMsgBody(selectUsMsgCount+"");
    		//session.sendMessage(new TextMessage(count + ""));
    		try {
    			sendMessageToUser(uid,new TextMessage(JsonUtils.conveDataToJson(msg)));
    		} catch (IOException e) {
    			e.printStackTrace();
    			log.info("未读消息读取失败!");
    		}
    		USER_MESSAGE_COUNT_MAP.put(uid,selectUsMsgCount);
    	}
    
    展开全文
  • 所以有多个页面。目前我想实现聊天功能!大概是这样的: <p><br /> 登录之后进入其他用户界面,点击发送消息,跳转到聊天界面,编辑信息,发送信息。 后端判断这个用户是否...
  • JavaScript 同时建立多个websocket连接

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

    程序源码如下:

        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); //创建连接 
    
    }
    }
    

    我这里创建了5个websocket连接,并将5个连接对象存储于socket数组中,可以去数组中获取相应对象操作,代码根据自己需求做更改

    展开全文
  • 大客户端可以发送消息到小客户端,并且大客户端可以发送“jump”命令到小客户端控制小客户端页面跳转到百度。其中系统管理页面记录所有大端与小端发送的消息,以及大端与小端的id。
  • 使用C语言实现一个websocket

    千次阅读 热门讨论 2019-08-07 15:38:12
    自己也写了段时间的游戏客户端所以想以一个游戏的方式来学习服务端,考虑到要和客户端交互所以第一件事就是先写一个websocket来进行长连接。奈何网上搜索了很资料关于C语言来实现websocket的寥寥无几,更的是...
  • 最近早做一个外卖的小程序,碰到一个需求,多人下单,为了保证堂食同桌的每个人实时获取到每个人点菜信息,所以使用websocket,小程序也提供了socket的API。 自己封装的socket.io.js文件: const callback=()=>...
  • websocket(多个客户端)

    千次阅读 2020-11-02 23:49:50
    现很网站为了实现即时通讯,所用到的技术是轮询polling,使用websocket,浏览器和服务器只要做一个握手的动作,在两者之间形成快速通道 实时通讯,可以保持与客户端的长连接 节省资源:互相沟通的header大概2Bytes...
  • websocket对象用的是同一个ws url,但参数url(视频流url,多个摄像头)不同,现在想在同一个页面实现获取到不同摄像头视频流的...建一个websocket对象就可以了,还是需要建立多个websocket对象?是否有代码参考,谢谢!
  • 代码里是C++ websocket客户端 c++websocket 服务器端+页面websocket js端。websocket客户端可以嵌入到项目中,websocket服务器端可以接收多...我的业务是客户端发送到服务器端,服务器端在根据IP选择发送给多个客户端。
  • 一个项目中三个页面链接都是一个websocket,可以将链接压缩到一个js里面么?是不是只要在首页加载时进行一次就可以?
  • SpringBoot集成WebSocket实现...首先至少得有一个websocket服务端 与一个多个 websocket客户端 已提供源码免费下载,Spring Cloud alibaba nacos注册中心+【websocket服务端和websocket客户端】两个服务 参考文章,
  • 本文将会用一个简单的例子来阐述。 一、页面实现 var Chat = {}; Chat.socket = null; Chat.connect = (function(host) { //判断当前浏览器是否支持WebSocket if ('WebSocket' in window) { ...
  • 一个端口支持tcp和websocket 这样就不需要开两个端口了 同一个端口支持tcp和websocket 这样就不需要开两个端口了
  • 编译环境:jdk1.8 , tomcat8.0+ , IDEA ...websocket主要的三类 MyWebSocketConfig主要负责配置websocket的处理器和握手拦截器 MyHandShakeInterceptor 是websocket的拦截器 MyWebSocketHander是websock...
  • 上一篇对WebSocket进行了介绍,这次使用WebSocket来实现一个简单的页面聊天的功能。 准备 需要注意: tomcat6是不支持WebSocket的,从tomcat7才开始支持。 普通的JaveEE、JSPServlet项目也是不支持WebSocket的,...
  • WebSocket

    2021-01-22 22:24:53
    文章目录WebSocket一、为什么需要 WebSocket?二、简介三、客户端的简单示例四、客户端的 API4.1 WebSocket 构造函数4.2 webSocket.readyState4.3 webSocket.onopen4.4 webSocket.onclose4.5 webSocket.onmessage4.6...
  • 如何实现websocket多页面长连接

    千次阅读 2019-05-23 17:55:04
    找了下网上还没有一个方案解决类似问题,很是头疼,很多人可能会在页面用到时新建一个websocket,然后不用时直接销毁掉,这是一种办法,但是随之而来会导致一个项目多页面创建了多个websocket对象,这样肯定对违背...
  • websocket 利用json 传递多个参数

    万次阅读 2017-08-03 14:53:12
    目前情况是页面加载完后要从后台获取多个信息,而信息是动态的,这要求我们前端也要动态的显示,查了很多资料,利用websocket终于解决了.其实主要注意一点,websocket的参数是以二进制来传递的,在编写代码时注意编码与...
  • websocket

    2021-04-20 18:41:07
    WebSocket API 中,浏览器和服务器只需要完成次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。 websocket的属性 Socket.readyState 表示连接状态 0 表示连接尚未建立 1 表示连接已建立,可以...
  • 在新建一个聊天室之前我们首先要了解什么是websock以及websocket api的一些常用知识 一、什么是WebSocket ? 在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API。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 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,887
精华内容 14,754
关键字:

一个页面多个websocket