资讯专栏INFORMATION COLUMN

腾讯云IM-SDK集成(web端)完成IM登录

susheng / 607人阅读

摘要:我个人觉得腾讯云的文档,以及一些例子,写得有点简单,并且是用做的,当然我只是做的是端,至于其他小程序端,还有其他端那我就不清楚了。

一脸懵逼的看着腾讯云的文档,完成了所谓的采坑之旅

(1)很多人估计公司也需要用到聊天,以及音视频的功能,那么作为萌新的我,当然也是一来公司便得知需要用到这个技术,当时我是懵逼的,因为从来没接触过

(2)从得知这个消息后,我便开始了网上的各种搜索,百度,google,发现可以实现这些的东西的不仅仅除了腾讯云,还有融云等一些东西,我大概了解了一下。我个人觉得腾讯云的文档,以及一些例子,写得有点简单,并且是用H5做的,当然我只是做的是web端,至于其他小程序端,还有其他端那我就不清楚了。但是,我要怎么集成到vue.js上来呢,并且是自己搭建的脚手架。结果也是懵逼的,去网上也查不到腾讯云与vue.js相关东西,这就很头疼了,那么采坑就开始了,首先,我们先来看看IM的官方文档:https://cloud.tencent.com/doc...

打开官方文档,一眼望上去很无奈,怎么那么多

但是如果我们只是负责客户端,看这个就好了,其他你想看一下也可以

(3)别慌,跟着我一起慢慢看完。

这里显示那么多种,就得看你公司需求了,我们来看看web通用

(4)点进去之后,这里有很多文档的说明,我个人建议,先浏览一遍,你的脑袋才不会空白,即使看不懂也会有点印象

(5)当你看完Web通用的下面提供的Web SDK的时候,回到第一个留意下这个东西

你要看看你公司用的是独立模式还是托管模式,我用的是独立模式,很坑的就是官方文档并没有贴出独立模式的相关代码或者例子,就算有也是没啥用的demo,这个会心态爆炸

(6)关键的地方来了,注意官方说的:
说明:如果帐号采用的是独立模式,开发者需要在自己的服务器调用 TLS API 生成用户票据,然后调用 ImSdk 提供的接口进行相关操作。

(7)由于我这边的sig是由自己的服务器在通过腾讯云的服务器端(这一部分并不是我负责,所以不是很清楚)已经生成好了票据,那么我直接去通过接口去拿就行,大概的流程是这样的:

也就是说,这个就是独立模式登录的方法,我是直接在登录腾讯IM系统开始就行,但是你们的话就要根据具体情况去做了。其实我也很想去了解服务器端的sig的生成票据的方法,但是由于时间问题,就没有去了解

(8)好吧,说了这么多,大概的情况你们都了解了吧,看下一点

(9)集成 ImSDK------首先引入 Web SDK
有人会问,在vue.js怎么去引入呢,其实很简单,直接index.html中引入就可以了

你们会不会发现跟网上的提供的不一样,确实,这个东西找了很久,有些人如果按照官方给的那种方案也就是下面这种本地引入:


进行引入的话,控制台会出现报错,会警告你什么UPXX Token < 这种类型的报错,我也忘记啥了,反正我之前按照官网提供的做法去,就出现这个问题,但是如果按照我这种做法去做的话,一般没问题,个人感觉良好,哈哈哈哈哈~当你看到没报错的时候别提多开心了

(10)好了,引入完之后,接下来我们继续看看文档

这个有什么用呢? 肯定有用啊,黑字白纸,写得明明白白。这也就类型嘛,我用的是群会话

(11)接下来我们来点击 登录(web sdk)那一栏, 了解一下是怎么进行登录IM系统

在这里,只需要注意loginInfo,listeners, 以及一个成功的回调跟失败的回调,你可以这样写

我们来看第一个参数loginInfo

我这里用到了里面的参数,但是加了一个accountType,这个accoutType可以作为公司的标识,或者是其他标识,你可以不用这个字段,但是你想知道这个字段是干嘛的,你可以去了解一下

这些参数,通过自己的后台,也就是服务器端提供的IM接口去获取,当然这些参数都是必须的,除了有特殊说明,就是选填的,那么就不用写进去了

(12)我们来看第一个参数listeners

这里参数很多,但是具体的还得看你们怎么用
我用的是这两个

选这两个的原因是:项目需要,也就是类似于聊天一样,别人发信息过来,你可以监听到,然后你在监听到的回调中去做一些你写的逻辑处理

(13)做到这一步的时候,应该可以进行IM SDK登录成功了,如果显示是这样的,那么就是成功了

忘记了说了一个东西:
isLogOn: false // 是否开启控制台打印日志,True-开启,False-关闭,默认开启,选填

这个只是用来辅助下自己看看日志,你可以不用去看,看个人吧~

我也是第一次接触这个东西,可能哪里不足的地方,多多指教!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114297.html

相关文章

  • 腾讯IM-SDK集成web完成IM登录

    摘要:我个人觉得腾讯云的文档,以及一些例子,写得有点简单,并且是用做的,当然我只是做的是端,至于其他小程序端,还有其他端那我就不清楚了。 一脸懵逼的看着腾讯云的文档,完成了所谓的采坑之旅 (1)很多人估计公司也需要用到聊天,以及音视频的功能,那么作为萌新的我,当然也是一来公司便得知需要用到这个技术,当时我是懵逼的,因为从来没接触过 (2)从得知这个消息后,我便开始了网上的各种搜索,百度,go...

    mikyou 评论0 收藏0
  • 腾讯IM-SDK集成web完成IM登录

    摘要:我个人觉得腾讯云的文档,以及一些例子,写得有点简单,并且是用做的,当然我只是做的是端,至于其他小程序端,还有其他端那我就不清楚了。 一脸懵逼的看着腾讯云的文档,完成了所谓的采坑之旅 (1)很多人估计公司也需要用到聊天,以及音视频的功能,那么作为萌新的我,当然也是一来公司便得知需要用到这个技术,当时我是懵逼的,因为从来没接触过 (2)从得知这个消息后,我便开始了网上的各种搜索,百度,go...

    chengtao1633 评论0 收藏0
  • Android通信IM系列(1)-集成与配置

    摘要:如果有朋友对不了解,可以看我之前的文章基本操作初始化可以直接看官网址或者我们可以下载云通信的,然后仿照它的初始化配置也可以的。 前言 因为项目中用到了腾讯云通信,网上云通信IM的文章很少,所以我打算详细写一下,希望对大家有所帮助。 什么是云通信IM 云通信 IM(Instant Messaging)承载亿级 QQ 用户即时通讯技术,数十年技术积累,腾讯云为您提供超乎寻常即时通讯聊天服务...

    tainzhi 评论0 收藏0
  • 技术详解:实现互动直播全过程

    摘要:对于聊天室本身的聊天功能的实现,因为接入云信,主要是通过调用封装实现的,就不细说了。云信的互动直播功能,支持主播和观众实时连麦互动。 本文主要整理互动直播中各端的逻辑,重点是与前端相关的教师端IM的部分和Web/Wap学生端。希望通过这份整理,对于前端在维护时可以尽快的理解互动直播的流程,提高项目的可维护性;对于客户端和教师端来说,可以了解到前端提供的接口和消息的实现。也能提高对整个请...

    airborne007 评论0 收藏0
  • 国内值得关注的官方API集合

    摘要:电影豆瓣电影豆瓣电影支持电影条目,影人条目,搜索和榜单等。音乐豆瓣音乐支持音乐信息,评论信息,标签信息,搜索音乐,某个音乐中标记最多的标签,发表修改删除评论,用户对音乐的所有标签等内容。 项目地址:https://github.com/marktony/A... 本页仅收集国内部分官方API,如需查看其他版本,请点击这里。 目录 笔记 出行 词典 电商 地图 电影 即时通讯 开发者网...

    gaomysion 评论0 收藏0

发表评论

0条评论

susheng

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<