前端运用腾讯云即时通讯IM进行会话聊天

本文仅给新接触即时通讯的新手们,并且看文档没有方向的朋友们提供一个清晰的思路,大佬们轻喷。

不管你是想在html、vue项目、微信小程序中哪里想运用腾讯云即时通讯IM,都可以很好的实现,现在给大家介绍下大概实现步骤:

1、初始化

实现即时通讯首先要进行的是初始化,以web项目为例子:

import TIM from 'tim-js-sdk';
// 发送图片、文件等消息需要的 COS SDK
import COS from "cos-js-sdk-v5";

let options = {
   
  SDKAppID: xxx // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
};
// 创建 SDK 实例,TIM.create() 方法对于同一个 SDKAppID 只会返回同一份实例
let tim = TIM.create(options); // SDK 实例通常用 tim 表示

// 设置 SDK 日志输出级别,详细分级请参见 setLogLevel 接口的说明
tim.setLogLevel(0); // 普通级别,日志量较多,接入时建议使用
// tim.setLogLevel(1); // release 级别,SDK 输出关键信息,生产环境时建议使用

// 注册 COS SDK 插件
tim.registerPlugin({
   'cos-js-sdk': COS});

以上引入文件如果是微信小程序或者普通web项目,则需要下载对应js文件,然后引入,如果是vue项目,可以cnpm/npm安装对应依赖包;SDKAppID是你腾讯云即时通讯项目里的对应项目id,去你的控制台获得;

2、登录

实现即时通讯首先要进行的是登录,至于登录所需要的id,token之类的就不一一介绍了,官方文档中有关于服务端生成,这就需要你的后台老哥去研究啦。

let promise = tim.login({
   userID: 'your userID', userSig: 'your userSig'});
promise.then(function(imResponse) {
   
  console.log(imResponse.data); // 登录成功
}).catch(
  • 7
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
KakaopayAmt": "", "IsBlue": "", "BlueResultNo": "", "BlueAmt": "", "IsAsiana": "", "AsianaResultNo": "", "AsianaAmt": "", "IsSmilecard": "", 腾讯云IM提供了适用于 Vue.js即时通讯 SDK,可以方便地在 Vue.js 项目中 "SmilecardResultNo": "", "SmilecardAmt": "", "IsHanaskcard": "", "Hanaskcard使用。使用前需要先引入 SDK,并且需要在腾讯云 IM 控制台上创建应用并获取 SDKAppIDResultNo": "", "HanaskcardAmt": "", "IsHanaone": "", "HanaoneResultNo": "", 和密钥信息。 以下是使用腾讯云 IM SDK 在 Vue.js 中实现简单的即时通讯功能的示 "HanaoneAmt": "", "IsLotte": "", "LotteResultNo": "", "LotteAmt":例代码: ```html <template> <div> <div v-for="msg in msgList" :key="msg.time "", "IsHyundaione": "", "HyundaioneResultNo": "", "HyundaioneAmt": "", ""> <p>{{ msg.sender }}: {{ msg.content }}</p> <small>{{ msg.time }}</small> </div> IsNonghyupone": "", "NonghyuponeResultNo": "", "NonghyuponeAmt": "", <input v-model="inputMsg" @keydown.enter="sendMsg" /> </div> </template> <script> import TIM from ' "IsSamsungone": "", "SamsungoneResultNo": "", "SamsungoneAmt": "", "IsWoorionetim-js-sdk' export default { data() { return { tim: null, userID: 'user1', convID": "", "WoorioneResultNo": "", "WoorioneAmt": "", "IsShinhancardone": "", : 'conv1', inputMsg: '', msgList: [] } }, mounted() { this.initIM() "ShinhancardoneResultNo": "", "ShinhancardoneAmt": "", "IsHyundaicardone }, methods: { initIM() { this.tim = TIM.create({ SDKAppID: 'xxx', // 替换为": "", "HyundaicardoneResultNo": "", "HyundaicardoneAmt": "", "IsSamsun自己的 SDKAppID userID: this.userID, userSig: 'xxx' // 替换为自己的密钥ghappyone": "", "SamsunghappyoneResultNo": "", "SamsunghappyoneAmt": "", 信息 }) this.tim.on(TIM.EVENT.MESSAGE_RECEIVED, this.handleMsgReceived) this.tim.login() }, sendMsg() "IsNonghyupcardone": "", "NonghyupcardoneResultNo": "", "Nonghyupcard { const msg = this.tim.createTextMessage({ to: this.convID, payload: { text: this.inputMsg } }) this.tim.sendMessage(msg) this.msgList.push({ sender: this.userID, content: this.inputMsg, oneAmt": "", "IsHappymoneycardone": "", "HappymoneycardoneResultNo": "", " time: new Date().toLocaleString() }) this.inputMsg = '' }, handleMsgReceived(event) { const msgHappymoneycardoneAmt": "", "IsCulturesurvivalone": "", "CulturesurvivaloneResult = event.data[0] this.msgList.push({ sender: msg.from, content: msg.payload.text, time: newNo": "", "CulturesurvivaloneAmt": "", "IsDongaone": "", "DongaoneResultNo Date(msg.time * 1000).toLocaleString() }) } } } </script> ``` 这个示例中,": "", "DongaoneAmt": "", "IsGmarketone": "", "GmarketoneResultNo": "", 我们使用了 tim-js-sdk 库来操作腾讯云 IM,通过创建 TIM 实例来进行登录、发送消息、接收消息 "GmarketoneAmt": "", "IsEtcCardone": "", "EtcCardoneResultNo": "", "EtcCardoneAmt": "", "IsBlueone": "", "BlueoneResultNo": "", "BlueoneAmt": "", 等操作。在模板中,我们使用 v-for 指令来展示消息列表,并通过 v-model 指令来实现输入框的双向绑定,通过 @keydown.enter 事件监听来发送消息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值