请选择 进入手机版 | 继续访问电脑版

默认
发表评论 14
想开发IM:买成品怕坑?租第3方怕贵?找开源自已撸?尽量别走弯路了... 找站长给点建议
[已解决] 求助如何在vue项目中使用MobileIMSDK-Web
神秘人  发表于 1 个月前 |阅读模式
我新创建了一个vue项目,服务连得是mobileIMSDK-web  demo的服务
项目主页面(index.html)引入mobileIMSDK-web 开发手册中写入的对应的文件
页面上暂时只写入了登录,调用登录方法,
IMSDK.loginImpl(loginInfo, "192.168.1.17:3000", false);

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


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

即时通讯网 - 即时通讯开发者社区! 来源: - 即时通讯开发者社区!

推荐方案
评论 14
你能把浏览器控制台下的完整log和服务端nodejs下的log抓出来,分析一下看看吗。
签名: 《深入操作系统,一文读懂进程、线程、协程》http://www.52im.net/thread-3357-1-1.html
神秘人  发表于 1 个月前
引用:JackJiang 发表于 2021-01-26 15:58
你能把浏览器控制台下的完整log和服务端nodejs下的log抓出来,分析一下看看吗。

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

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

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

微信图片_20210126162052.png
微信图片_20210126161337.png
神秘人  发表于 1 个月前
目前是把demo里浏览器部分的代码引入到自己的项目中的,包括main2.js也引入过来尝试使用,但是一直被卡在登录这里
神秘人  发表于 1 个月前
引用: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,那应该就不会有问题,否则就同样会有问题。
签名: 《深入操作系统,一文读懂进程、线程、协程》http://www.52im.net/thread-3357-1-1.html
神秘人  发表于 1 个月前
引用: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,通信正常吗?
签名: 《深入操作系统,一文读懂进程、线程、协程》http://www.52im.net/thread-3357-1-1.html
引用: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的表现,对照一下看看是哪种问题可能性。你后绪把诊断的情况都放出来,我也帮你分析分析
签名: 《深入操作系统,一文读懂进程、线程、协程》http://www.52im.net/thread-3357-1-1.html
引用: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文件中传上来,我也帮你一起分析一下,我感觉离问题的正相很接近了。
签名: 《深入操作系统,一文读懂进程、线程、协程》http://www.52im.net/thread-3357-1-1.html
引用: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一致,即可解问题。
打赏楼主 ×
使用微信打赏! 使用支付宝打赏!

返回顶部