集成netty-socketio、socket.io.js，总结一些可能出现的问题bug_netty-socketio与socketio.js版本兼容

一、网上集成例子：

第一种：

https://www.cnblogs.com/zyulike/p/10775358.html

第二种：

https://www.jianshu.com/p/af7d881f7546
https://www.jianshu.com/p/6d4c57f723b6

这两种方式的监听客户端发送给服务端的消息，是有区别的！！！一个是靠addEventListener监听，一个是靠注解@OnEvent监听。

二、个人经历以及大家可能出现的bug

本文只讲述部分可能出现的问题：

1. 检查前后端连接参数是否对上。
2. 无限循环连接或其他问题，可能是版本没对上。
3. 连接上了，发送接收消息不行，可能是事件名没对上。
4. 不同的接收客户端往服务器发消息方式。（不细讲）

1. 前后端连接参数。

注意底下那个参数userId（userId是可以自定义的，但要和前端一样），这个参数是与前端有关联的，我们跳过去那个getParamsByClient方法看一下。


我们发现，是从连接的客户端client中的urlParams（有兴趣可以自己点进去看，里面还有header参数等）参数中，获取到userId。至于为什么是get(0)，因为前端这个参数就只传了一个值呀。跳转到前端看代码。由于项目用的缓存取值，我这里展示我自己的demo中的例子，简单点。

可以发现，userId是作为连接时候用的参数，传入的，因此如果要修改连接的参数名，前后端都得修改，否则会对不上。

2. 版本问题。

首先，我这边是出现了一个无限制重连的问题，后面排查发现是版本问题。

官网已经声明，最新版的Netty-Socketio支持的相对应的socket.io-client的版本，由于我不是学前端的，我只知道socket.io-client可以通过npm安装，如图：

而我正在集成的这个，是纯html，但是也发现，有版本问题，起初试过直接拿官网的socket.io.js的各个版本，试过了包括4.4.0，3.0.0，2.2.0这些个版本，都没用，后来是更改为如下才有用的：

<script src="https://cdn.bootcss.com/socket.io/2.1.1/socket.io.js"></script>
1

官网的是（官网js包地址https://cdn.socket.io/）： 如果用官网，可能在前端会报一个警告，可以自己看看

<script src="https://cdn.socket.io/socket.io-2.1.1.js"></script>
1

3. 前后端消息不通的问题。

个人遇到的主要原因为：事件名对不上。

后端有关实时发送消息的事件代码：
这个代码，是我拿的公司已有的demo例子，所以没注意到此处的type，集成过去的时候就遇到问题一直找不到。因为这个type，在这个demo里面，是个枚举类，我实在没看到！！！又是突然学的，没有细学，太粗心了，建议大家把type改为event或其他比较明显意思的词。后来无意间在网上再看代码的时候，看到了上面图中重点的地方的两个参数，client.sendEvent(“前端指定事件名”，“要发送的消息”)。

找到对应的连接的客户端，就是clientMap.get(userId)。此处是由于我里面用map来存储id及客户端的对应关系的，所以才用get，你们自己用什么就自己取。然后再使用client.sendEvent(“前端指定事件名”，“要发送的消息”)。

前端有关实时发送消息的事件代码：
socket.on(‘事件名’, function (data) { });
注意了，这里的messages，是和上面的后端的type对应一样的名称，这样事件才能连接到。

eg：
后端client.sendEvent(“shijianming”, msgContent);
前端socket.on(‘shijianming’, function (data) { // 处理后端传过来的数据 });

4. 监听客户端给后端发送消息时，接收不到

最顶层已经说了，方式不同，一个是通过注解，一个是通过监听器，我这边使用的是监听器的那个样例。注意，这个监听器样例，是在start()方法中的，而start()方法已经在spring启动时也启动了。

后端：后端类似监听器。
参数说明：

1. "text"：事件名，要与前端的事件名相对应。
2. SocketIOMessage.class：实体类名，是自己定义的实体类，具体是看你前端怎么传的，如果前端像我一样传json的话，就可以直接这样，都不用转换了。
3. data：前端发送过来的数据。
   
   前端：前端放在哪里都行，也可以选择点击触发，看具体场景。像此处就是连接时候打印个text。
   参数说明：
4. "text"：监听的事件名字，与后端对应。
5. {content:“text”}：我个人传的一个参数而已，不是固定的，自定义协调解决传参的问题。