精华内容
下载资源
问答
  • 使用以下代码的情况下,只能开启一个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,可以将链接压缩到一个js里面么?是不是只要在首页加载时进行一次就可以?
  • Websocket合并,解决页面多个websocket连接问题 背景 1. 打开首页会发起多次websocket连接,每个都调用后端各自的websocket进行; 2. 其他子页面是嵌套在主页里的,打开子页面会发起子页面里的websocket连接; 3. ...

    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 简介WebSocket 是 HTML5 开始提供的...在 WebSocket API 中,浏览器和服务器只需要完成次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。在 WebSocket API 中,浏览器和服务器只需要做...

    WebSocket 简介

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

    WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

    在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

    为什么传统的HTTP协议不能做到WebSocket实现的功能?这是因为HTTP协议是一个请求-响应协议,请求必须先由浏览器发给服务器,服务器才能响应这个请求,再把数据发送给浏览器。换句话说,浏览器不主动请求,服务器是没法主动发数据给浏览器的。

    Web

    我们先用 express 搭一个基础的服务端。

    创建 index.js 文件

    var app = require('express')();var http = require('http').createServer(app);app.get('/', function(req, res){ res.send('

    Hello world

    ');});http.listen(3000, function(){ console.log('listening on *:3000');});

    run node index.js,并在浏览器打开 http://localhost:3000,访问成功即可看到

    685da99931ffc19a67a0a29f9c40064b.png

    HTML

    设计我们的主页,实现一个简单的聊天窗口。

    修改 index.js

    app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html');});

    创建 index.html

      Socket.IO chat
    Send

    重启应用并刷新页面你就可以看到一个如下图所示

    2f9752639a7fa44cfee7330e8a695f98.png

    Socket.io

    引入socket.io

    npm install --save socket.io

    修改 index.js

    var app = require('express')();var http = require('http').Server(app);var io = require('socket.io')(http);app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html');});io.on('connection', function(socket){ console.log('an user connected');});http.listen(3000, function(){ console.log('listening on *:3000');});

    修改 index.html,在

    展开全文
  • 当时开发时用websocket和mq实现从微信里取数据使用mq接收在发送到websocket,因为没有用过websocket遇到了很坑,查找了很方法也没有解决掉,现在把我解决的方法分享给大家 1.我使用的是springboot微服务框架实现...

    当时开发时用websocket和mq实现从微信里取数据使用mq接收在发送到websocket,因为没有用过websocket遇到了很多坑,查找了很多方法也没有解决掉,现在把我解决的方法分享给大家
    1.我使用的是springboot微服务框架实现的websocket,需要导入jar:

    org.springframework.boot
    spring-boot-starter-websocket

    如果你是使用ServerEndpoint这个注解实现的话,问题就来了
    在这里插入图片描述
    我们做完要访问这个连接的时候,控制台会报一个错误

    在这里插入图片描述
    这是因为我们少加了一个@Component(“WebSocketLast”)注解
    在这里插入图片描述
    出现get请求错误的原因是我们发送一个请求连接的时候默认是一个get请求,但是我们要访问的不是一个controller类,映射不到方法上,
    @component (把普通pojo实例化到spring容器中,相当于配置文件中的

    泛指各种组件,就是说当我们的类不属于各种归类的时候(不属于@Controller、@Services等的时候),我们就可以使用@Component来标注这个类。这样就不会报错

    当打开多个浏览器访问同一个页面的时候,心跳测试会无法返回open给前端,长连接会失效,比如:
    在这里插入图片描述
    在网上查了没有解决的办法,这个主要和单例和多例有关系,我们都知道spring是单例模式的,
    singleton 表示在spring容器中的单例,通过spring容器获得该bean时总是返回唯一的实例
    prototype表示每次获得bean都会生成一个新的对象
    两个页面访问websocket的时候总是换掉上一次的路径,所以上一次的会失效,只要在websocket类上面加上@Scope注解,注解里填上prototype就可以实现多页面长连接
    在这里插入图片描述

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

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

    千次阅读 2019-03-01 11:48:41
    最近学习websocket,大佬给我布置了作业,让我做一个多页面聊天的demo.然鹅,真的websocket只听说过没用过,咋搞.没办法,还是得做.至于wensocket的原理及方法我这里就不班门弄斧了,自己还处于学习阶段,就记录下我这个...
  • 1.在app.js中连接websockt,在个字页面中监听这样可以始终保持只有一个websockt连接,不会提示错误
  • 前言前段时间在本地写的一个WebSocket程序部署到服务器上时出错,通过段时间的研究,终于解决了,所以本文就来给大家分析下并给出解决的方法,下面话不说了,来一起看看详细的介绍吧。本地环境是:JDK1.8(32位) ...
  • 类似于单点登录,一个账号只能在一个地方登录,我们的长连接也经常会需要限制一个用户只能保持一个连接 这里就讲一下实现单点连接的一种思路 /** * WebSocket 配置类 */ @Configuration @EnableWebS...
  • 屏互动事实上是一个比较宽泛的概念,通俗来讲就是用户在不同的终端上通过有线、无线的连接方式进行通信,可进行多媒体(音频,视频,图片)内容的传输,解析,展示,控制等一系列操作。而随着WebSocket协议的诞生...
  • WebSocket 的使用

    2017-01-08 21:47:12
    说明:WebSocket的通信时每个链接都会在onOpen方法里面建立一个WebSocketSession,当多个session连接的时候,我们就需要对每个session进行唯一性标识(一般一个用户有一个连接)所以就需要创建一个Map来装所有的session...
  • tornado websocket

    2018-09-09 16:58:00
    通过长轮询的方式,每隔几秒向服务器发送一个请求,服务器判断这个请求中有没有用户扫码。 缺点 1.开销大 2.浪费资源 3.消耗流量 二、websocket概念 长轮询消耗太资源,其中主要原因是客户端和服务端并...
  • 因为WebSocket连接本质上是TCP连接,不需要每次传输都带上重复的头部数据,所以它的数据传输量比轮询和Comet技术小很。接下来介绍一个执行Linux服务器备份脚本的案例: 第一步:安装websocket
  • 飞机大战总共三个页面:登录、匹配、游戏页面,三个页面的功能:1、 登录:玩家填写用户名,socket连接2、匹配:等待其他玩家准备3、游戏:战斗页面上述流程仿照了王者荣耀,所以就叫王者飞机(当然和王者荣耀相差...
  • 今天遇到一个需求,需要对接第三方扫码跳转。一种方案是前端页面轮询后端服务,但是这种空轮询会虚耗资源,实时性比较差而且也不优雅。所以决定使用另一种方案,websocket。以前就知道websocket,属于全双工长连接,...
  • 客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求页面里嵌入一个隐蔵iframe,将这个隐蔵iframe的sr...
  • 今天遇到一个需求,需要对接第三方扫码跳转。一种方案是前端页面轮询后端服务,但是这种空轮询会虚耗资源,实时性比较差而且也不优雅。所以决定使用另一种方案,websocket。以前就知道websocket,属于全双工长连接,...
  • spring websocket实现前后端通信

    万次阅读 多人点赞 2018-07-10 17:00:22
    项目要用websocket实现一个前后端实时通信的功能,做完之后感触颇,写个博客回顾下整个历程,也希望能给后面的同志有点帮助。我使用springmvc的websocket组件,官网地址:点击打开链接示例内容:用户登陆之后往...
  • JavaScript的websocket对象

    2020-07-02 18:51:39
    客户端可以多个页面创建同一端口的websocket对象 用于长连接通信 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> ...
  • 微信小程序之WebSocket

    2017-09-28 16:14:28
    选了房间号后,进去下一个游戏页面再开始建立webSocket链接。 3、客户端 使用微信小程序开发工具,直接连接是会报域名安全错误的,因为工具内部做了限制,对安全域名才会允许连接。所以同样的,这里我们也继续改下...
  • 今天遇到一个需求,需要对接第三方扫码跳转。一种方案是前端页面轮询后端服务,但是这种空轮询会虚耗资源,实时性比较差而且也不优雅。所以决定使用另一种方案,websocket。以前就知道websocket,属于全双工长连接,...
  • freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面、建表sql脚本、处理类、service等完整模块 2.数据源:(支持同时连接无数个数据库,可以不同的模块连接不同数的据库)支持N个数据源 3.阿里数据库...
  • 场景描述:进入页面时,如果设置强制签字,发送签字webSocket连接,同时页面有个重新签字按钮,这个按钮会次调用 第步:先建立一个websocket的js文件,名叫signSocket.js内容如下: 1 /* websocket */ 2 ...
  • 前端中实现实时通信必须用到websocket,通常前端vue项目中会有多个不同的路由页面,为了保证整个项目中共用一个相同的websocket连接,需要在App.vue中实例化websocket对象。同时,复杂的网络环境难以判断长连接的...
  • 现在的互联网项目大多采用分布式+微服务+服务集群的方式,那么当项目中的websocket采用集群...给用户页面推送消息的websocket服务未必是与该用户建立websocket连接的服务。单节点是没问题,节点就会出现问题 ...
  • websocket,实际用于客户端与服务器端的全双工通信,说白话,就是一个客户端(浏览器地址栏指定的跳转页面)连接服务器端(java类,注解成一个websocket服务器端),通过服务器端的程序控制可以允许多个客户端同时连接...
  • 如图,重连发起连接时,session是不一样的,线程不是同一个,且确定不是一个页面发起的,ID是不一样的,为什么到后台就一样了,求大神一解 ![图片说明]...

空空如也

空空如也

1 2 3 4 5 6
收藏数 110
精华内容 44
关键字:

一个页面多个websocket连接