[已解决] 求助如何在vue项目中使用MobileIMSDK-Web

我新创建了一个vue项目，服务连得是mobileIMSDK-web  demo的服务
项目主页面（index.html）引入mobileIMSDK-web 开发手册中写入的对应的文件
页面上暂时只写入了登录，调用登录方法，
IMSDK.loginImpl(loginInfo, "192.168.1.17:3000", false);

结果点击登录后浏览器一直发送请求，


后台信息提示  一直处于上线成功和被踢之间

你能把浏览器控制台下的完整log和服务端nodejs下的log抓出来，分析一下看看吗。

引用：JackJiang 发表于 2021-01-26 15:58
你能把浏览器控制台下的完整log和服务端nodejs下的log抓出来，分析一下看看吗。

看到后台打印信息  上线成功后 判定已经存在于上线列表中，但是session不是同一个（这个信息有点不知所措，为什么会导致），

引用：JackJiang 发表于 2021-01-26 15:58
你能把浏览器控制台下的完整log和服务端nodejs下的log抓出来，分析一下看看吗。

看到后台打印信息  上线成功后 判定已经存在于上线列表中，但是session不是同一个（这个信息有点不知所措，为什么会导致），

目前是把demo里浏览器部分的代码引入到自己的项目中的，包括main2.js也引入过来尝试使用，但是一直被卡在登录这里

引用：JackJiang 发表于 2021-01-26 15:58
你能把浏览器控制台下的完整log和服务端nodejs下的log抓出来，分析一下看看吗。

[2021-01-26 16:12:35.570] [DEBUG] console - [IMSDK] 新用户 liubowen (skt.id=/#vdqlxOI6Hd7wbZ5qAAB7)已经上线成功！
[2021-01-26 16:12:35.570] [DEBUG] console - [SDKUsers]【注意】用户id=liubowen已经在在线列表中了，session也是同一个吗(false)？
[2021-01-26 16:12:35.577] [INFO] console - [IM应用层-回调] liubowen 上线了, socketid=/#vdqlxOI6Hd7wbZ5qAAB7 (authedinfo={"loginUserId":"liubowen","loginToken":"47384h3uhjfh3j4j343j434h43"})
[2021-01-26 16:12:35.578] [DEBUG] console - [IMSDK] [E]客户端：/#vdqlxOI6Hd7wbZ5qAAB7 已经建立连接！
[2021-01-26 16:12:36.243] [DEBUG] console - [IMCORE]【注意】用户id=liubowen(/#2UzZQGw9nXGKS01uAAB5)已被踢下线且通信关闭！
[2021-01-26 16:12:36.244] [DEBUG] console - [IMSDK] [E]skt.id=/#2UzZQGw9nXGKS01uAAB5 连接已断开（该连接中没有认证信息，可能来自未认证成功要关闭的 连接！）
[2021-01-26 16:12:36.248] [DEBUG] console - [IMSDK] [E]客户端：/#2UzZQGw9nXGKS01uAAB5 已断开连接(socket.name=undefined)，【END】
[2021-01-26 16:12:36.577] [DEBUG] console - [IMCORE]【注意】用户id=liubowen(/#FPeDTA5hBLwVuW6xAAB6)已被踢下线且通信关闭！
[2021-01-26 16:12:36.578] [DEBUG] console - [IMSDK] [E]skt.id=/#FPeDTA5hBLwVuW6xAAB6 连接已断开（该连接中没有认证信息，可能来自未认证成功要关闭的 连接！）
[2021-01-26 16:12:36.582] [DEBUG] console - [IMSDK] [E]客户端：/#FPeDTA5hBLwVuW6xAAB6 已断开连接(socket.name=undefined)，【END】
[2021-01-26 16:12:41.564] [WARN] console - [SDKUsers]！用户id=liubowen已从在线列表中remove?true
[2021-01-26 16:12:41.566] [DEBUG] console - [IMSDK] [E]用户 liubowen (skt.id=/#vdqlxOI6Hd7wbZ5qAAB7) 连接已断开，是否成功从在线列表中移除？true
[2021-01-26 16:12:41.571] [INFO] console - [IM应用层-回调] liubowen 离线了, socketid=/#vdqlxOI6Hd7wbZ5qAAB7 (authedinfo={"loginUserId":"liubowen","loginToken":"47384h3uhjfh3j4j343j434h43"})
[2021-01-26 16:12:41.581] [DEBUG] console - [IMSDK] [E]客户端：/#vdqlxOI6Hd7wbZ5qAAB7 已断开连接(socket.name=liubowen)，【END】

后台打印信息，尝试看node部分的源码，但是没有能力更改，
根据提示信息找到对应代码，但是不明白为什么连续发起两个登录，而且两个对应session不一致

引用：赞茜 发表于 2021-01-26 16:43
[2021-01-26 16:12:35.570] [DEBUG] console -  新用户 liubowen (skt.id=/#vdqlxOI6Hd7wbZ5qAAB7)已经上 ...

看的日志，导致这个情况的关键问题，有可能不只是这个同个手机的session不能判定为同一个的问题。

根本原因，应该还是它每次都是一个新的连接。进而很快就超时，因为无法建立有效的心跳。

这个sdk默认是针对标准的html5，你vue应该也不是用在标准的pc端吧，是用在小程序里还是uniapp这样的手机框架里？你这个框架里能跑标准版本的socket.io吗，因为sdk的通信库就是基于socket.io，如果能跑socket.io，那应该就不会有问题，否则就同样会有问题。

引用：JackJiang 发表于 2021-01-26 16:48
看的日志，导致这个情况的关键问题，有可能不只是这个同个手机的session不能判定为同一个的问题。

根 ...

我是使用vue cli 搭建的一个pc端vue项目，没有引入其他的组件库以及框架，
sdk文件及依赖文件在index.html文件中引入，

引用：赞茜 发表于 2021-01-26 18:40
我是使用vue cli 搭建的一个pc端vue项目，没有引入其他的组件库以及框架，
sdk文件及依赖文件在index.ht ...

这是socket.io的官网链接：https://socket.io/

它提供了一个标准的在线测试demo，你看看在你的这个环境下，这个demo能不能用的好，跑的起来？观察一下浏览器下的log：https://socketio-chat-h9jt.herokuapp.com/

另外问一句：在正常的web浏览器下，打开sdk原版的demo，通信正常吗？

引用：JackJiang 发表于 2021-01-26 22:42
这是socket.io的官网链接：https://socket.io/

它提供了一个标准的在线测试demo，你看看在你的这个环 ...

好的,非常感谢,等我测试好之后再来评论
sdk原版demo是正常的,只是新建项目后出现这个问题,

引用：liuboon 发表于 2021-01-26 23:37
好的,非常感谢,等我测试好之后再来评论
sdk原版demo是正常的,只是新建项目后出现这个问题,

sdk原版正常的表示服务端应该是没有问题，那出现问题就是放到vue中导致的了，这个具体根据socket.io标准demo的表现，对照一下看看是哪种问题可能性。你后绪把诊断的情况都放出来，我也帮你分析分析

引用：JackJiang 发表于 2021-01-27 11:35
sdk原版正常的表示服务端应该是没有问题，那出现问题就是放到vue中导致的了，这个具体根据socket.io标准d ...

socket.io的demo运行一切正常，
1. 我今天测试使用一个静态的html文件，连接mobileIMSDK-web的demo服务，测试结果是依旧不断的请求，
所以我觉得是我引入socket.io的问题，但是检查版本都是一致的。
2. 之后也新建一个node服务，当页面是node渲染出来的时候，socket请求正常，当页面单独拿出来请求就会一直请求，所以也猜测会不会和不属于同一个项目有关

引用：liuboon 发表于 2021-01-27 20:15
socket.io的demo运行一切正常，
1. 我今天测试使用一个静态的html文件，连接mobileIMSDK-web的demo服务 ...

1、socket.io官方的demo没问题，那表示你的vue中使用websocket底层通信是没问题的，这是个好消息，因为即时通信最难的就是通信层。
2、看来，问题应该不出在服务端。因为客户端也就是js+css+html代码，它独立放在apache、iis或tomcat中都不会有问题。

你下一步的诊断思考这样来：
1）想办法取出sdk默认的demo运行时浏览器端的完整log（包括log输出时的完整时间信息）；
2）想办法取出sdk放到你的vue中运行时手机端的完整log（包括log输出时的完整时间信息）；

以上log，重点关注ping、pong包（也就是webscoket心跳包）的输出log。

你取出这些log后放到.txt文件中传上来，我也帮你一起分析一下，我感觉离问题的正相很接近了。

引用：JackJiang 发表于 2021-01-27 22:38
1、socket.io官方的demo没问题，那表示你的vue中使用websocket底层通信是没问题的，这是个好消息，因为即 ...

以下是我自己项目的打印信息，才发现是触发了connect_error事件

☢ [01/28 14:13:25.45] [E] 本客户端 connect_error 事件已触发{"code":"parser error"}
(index):351 ☢ [01/28 14:13:31.46] [E] 本客户端 connect_error 事件已触发{"code":"parser error"}
(index):351 ☢ [01/28 14:13:37.50] [E] 本客户端 connect_error 事件已触发{"code":"parser error"}
(index):351 ☢ [01/28 14:13:43.50] [E] 本客户端 connect_error 事件已触发{"code":"parser error"}
(index):351 ☢ [01/28 14:13:49.43] [E] 本客户端 connect_error 事件已触发{"code":"parser error"}
(index):351 ☢ [01/28 14:13:55.46] [E] 本客户端 connect_error 事件已触发{"code":"parser error"}
(index):351 ☢ [01/28 14:14:01.42] [E] 本客户端 connect_error 事件已触发{"code":"parser error"}
(index):351 ☢ [01/28 14:14:07.45] [E] 本客户端 connect_error 事件已触发{"code":"parser error"}
(index):351 ☢ [01/28 14:14:13.51] [E] 本客户端 connect_error 事件已触发{"code":"parser error"}
(index):351 ☢ [01/28 14:14:19.46] [E] 本客户端 connect_error 事件已触发{"code":"parser error"}
(index):351 ☢ [01/28 14:14:25.43] [E] 本客户端 connect_error 事件已触发{"code":"parser error"}
(index):351 ☢ [01/28 14:14:31.45] [E] 本客户端 connect_error 事件已触发{"code":"parser error"}
(index):351 ☢ [01/28 14:14:36.59] [E] 本客户端 connect_error 事件已触发{"code":"parser error"}
(index):351 ☢ [01/28 14:14:42.53] [E] 本客户端 connect_error 事件已触发{"code":"parser error"}
(index):351 ☢ [01/28 14:14:48.42] [E] 本客户端 connect_error 事件已触发{"code":"parser error"}
(index):351 ☢ [01/28 14:14:54.53] [E] 本客户端 connect_error 事件已触发{"code":"parser error"}
(index):351 ☢ [01/28 14:15:00.46] [E] 本客户端 connect_error 事件已触发{"code":"parser error"}
(index):351 ☢ [01/28 14:15:06.43] [E] 本客户端 connect_error 事件已触发{"code":"parser error"}
(index):351 ☢ [01/28 14:15:12.43] [E] 本客户端 connect_error 事件已触发{"code":"parser error"}

问题已解决
问题的原因是：个人不小心，在Vue中引用的客户端socket.io.js版本（引用的是第3方CDN上的不同版本）与服务端的版本不符，

需要使用源码demo本身的socket版本，并将vue项目中引入的socket.io版本修改与源码demo一致，即可解问题。