使用以下代码的情况下，只能开启一个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连接问题

背景

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 开始提供的一种在单个 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，访问成功即可看到
HTML
设计我们的主页，实现一个简单的聊天窗口。
修改 index.js
app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html');});
创建 index.html
  Socket.IO chat
 Send  
重启应用并刷新页面你就可以看到一个如下图所示
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，需要导入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就可以实现多页面长连接