|
|
@@ -1,196 +1,205 @@
|
|
|
-<template>
|
|
|
- <div>
|
|
|
- <div @click="sendMessage('快点啊', '2211')">发送消息</div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import { mapState } from 'vuex';
|
|
|
-
|
|
|
-import TIM from 'tim-js-sdk';
|
|
|
-import COS from 'cos-js-sdk-v5';
|
|
|
-export default {
|
|
|
- name: '',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- SDKAppID: 1400401634,
|
|
|
- userID: 2015,
|
|
|
- userSig:
|
|
|
- 'eJwtzMsKwjAURdF-ybRSbp6SgpPiRIjgo0VwJja1l6gNMUpA-HdL2*FZB-aXVOaYf2wgBWE5kMW4sbHPiC1ODFTO-mrcxXtsSEEFgACquJgemzwGO7iUkgHApBEfo2klNWeMzRW8DVmknc7KoPbJmU11jedTysAtW9dtexN39Z0f1n1gb1fDivz*cZcwNQ__',
|
|
|
- tim: null,
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['userInfo']),
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- window.chatLogin = this.chatLogin;
|
|
|
- window.sendMessage=this.sendMessage;
|
|
|
- },
|
|
|
- methods: {
|
|
|
- chatLogin(userID, userSig) {
|
|
|
- if (userID) {
|
|
|
- this.userID = userID;
|
|
|
- }
|
|
|
- if (userSig) {
|
|
|
- this.userSig = userSig;
|
|
|
- }
|
|
|
-
|
|
|
- this.init();
|
|
|
- },
|
|
|
- init() {
|
|
|
- // 创建 SDK 实例,TIM.create() 方法对于同一个 SDKAppID 只会返回同一份实例
|
|
|
- let options = {
|
|
|
- SDKAppID: this.SDKAppID, // 接入时需要将0替换为您的即时通信应用的 SDKAppID
|
|
|
- };
|
|
|
- this.tim = TIM.create(options); // SDK 实例通常用 tim 表示
|
|
|
- // 设置 SDK 日志输出级别,详细分级请参见 setLogLevel 接口的说明
|
|
|
- this.tim.setLogLevel(0); // 普通级别,日志量较多,接入时建议使用
|
|
|
- // tim.setLogLevel(1); // release级别,SDK 输出关键信息,生产环境时建议使用
|
|
|
-
|
|
|
- // 将腾讯云对象存储服务 SDK (以下简称 COS SDK)注册为插件,IM SDK 发送文件、图片等消息时,需要用到腾讯云的 COS 服务
|
|
|
- // HTML5 环境,注册 COS SDK
|
|
|
- this.tim.registerPlugin({ 'cos-js-sdk': COS });
|
|
|
-
|
|
|
- // 监听事件,如:
|
|
|
- // eslint-disable-next-line no-unused-vars
|
|
|
- this.tim.on(TIM.EVENT.SDK_READY, (event)=>{
|
|
|
- // 收到离线消息和会话列表同步完毕通知,接入侧可以调用 sendMessage 等需要鉴权的接口
|
|
|
- // event.name - TIM.EVENT.SDK_READY
|
|
|
- });
|
|
|
-
|
|
|
- this.tim.on(TIM.EVENT.MESSAGE_RECEIVED, (event)=>{
|
|
|
- console.log(event);
|
|
|
- // 收到推送的单聊、群聊、群提示、群系统通知的新消息,可通过遍历 event.data 获取消息列表数据并渲染到页面
|
|
|
- // event.name - TIM.EVENT.MESSAGE_RECEIVED
|
|
|
- // event.data - 存储 Message 对象的数组 - [Message]
|
|
|
- if (window.ReactNativeWebView) {
|
|
|
- window.ReactNativeWebView.postMessage(
|
|
|
- JSON.stringify(event.data)
|
|
|
- );
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // eslint-disable-next-line no-unused-vars
|
|
|
- this.tim.on(TIM.EVENT.MESSAGE_REVOKED, (event)=>{
|
|
|
- // 收到消息被撤回的通知。使用前需要将SDK版本升级至v2.4.0或以上。
|
|
|
- // event.name - TIM.EVENT.MESSAGE_REVOKED
|
|
|
- // event.data - 存储 Message 对象的数组 - [Message] - 每个 Message 对象的 isRevoked 属性值为 true
|
|
|
- });
|
|
|
-
|
|
|
- // eslint-disable-next-line no-unused-vars
|
|
|
- this.tim.on(TIM.EVENT.MESSAGE_READ_BY_PEER, (event)=>{
|
|
|
- // SDK 收到对端已读消息的通知,即已读回执。使用前需要将SDK版本升级至v2.7.0或以上。仅支持单聊会话。
|
|
|
- // event.name - TIM.EVENT.MESSAGE_READ_BY_PEER
|
|
|
- // event.data - event.data - 存储 Message 对象的数组 - [Message] - 每个 Message 对象的 isPeerRead 属性值为 true
|
|
|
- });
|
|
|
-
|
|
|
- // eslint-disable-next-line no-unused-vars
|
|
|
- this.tim.on(TIM.EVENT.CONVERSATION_LIST_UPDATED, (event)=>{
|
|
|
- // 收到会话列表更新通知,可通过遍历 event.data 获取会话列表数据并渲染到页面
|
|
|
- // event.name - TIM.EVENT.CONVERSATION_LIST_UPDATED
|
|
|
- // event.data - 存储 Conversation 对象的数组 - [Conversation]
|
|
|
- if (window.ReactNativeWebView) {
|
|
|
- window.ReactNativeWebView.postMessage(
|
|
|
- JSON.stringify(event)
|
|
|
- );
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // eslint-disable-next-line no-unused-vars
|
|
|
- this.tim.on(TIM.EVENT.GROUP_LIST_UPDATED, (event)=>{
|
|
|
- // 收到群组列表更新通知,可通过遍历 event.data 获取群组列表数据并渲染到页面
|
|
|
- // event.name - TIM.EVENT.GROUP_LIST_UPDATED
|
|
|
- // event.data - 存储 Group 对象的数组 - [Group]
|
|
|
- });
|
|
|
-
|
|
|
- // eslint-disable-next-line no-unused-vars
|
|
|
- this.tim.on(TIM.EVENT.PROFILE_UPDATED, (event)=>{
|
|
|
- // 收到自己或好友的资料变更通知
|
|
|
- // event.name - TIM.EVENT.PROFILE_UPDATED
|
|
|
- // event.data - 存储 Profile 对象的数组 - [Profile]
|
|
|
- });
|
|
|
-
|
|
|
- // eslint-disable-next-line no-unused-vars
|
|
|
- this.tim.on(TIM.EVENT.BLACKLIST_UPDATED, (event)=>{
|
|
|
- // 收到黑名单列表更新通知
|
|
|
- // event.name - TIM.EVENT.BLACKLIST_UPDATED
|
|
|
- // event.data - 存储 userID 的数组 - [userID]
|
|
|
- });
|
|
|
-
|
|
|
- // eslint-disable-next-line no-unused-vars
|
|
|
- this.tim.on(TIM.EVENT.ERROR, (event)=>{
|
|
|
- // 收到 SDK 发生错误通知,可以获取错误码和错误信息
|
|
|
- // event.name - TIM.EVENT.ERROR
|
|
|
- // event.data.code - 错误码
|
|
|
- // event.data.message - 错误信息
|
|
|
- });
|
|
|
-
|
|
|
- // eslint-disable-next-line no-unused-vars
|
|
|
- this.tim.on(TIM.EVENT.SDK_NOT_READY, (event)=>{
|
|
|
- // 收到 SDK 进入 not ready 状态通知,此时 SDK 无法正常工作
|
|
|
- // event.name - TIM.EVENT.SDK_NOT_READY
|
|
|
-
|
|
|
- if (window.ReactNativeWebView) {
|
|
|
- window.ReactNativeWebView.postMessage(
|
|
|
- JSON.stringify(event)
|
|
|
- );
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // eslint-disable-next-line no-unused-vars
|
|
|
- this.tim.on(TIM.EVENT.KICKED_OUT, (event)=>{
|
|
|
- // 收到被踢下线通知
|
|
|
- // event.name - TIM.EVENT.KICKED_OUT
|
|
|
- // event.data.type - 被踢下线的原因,例如 :
|
|
|
- // - TIM.TYPES.KICKED_OUT_MULT_ACCOUNT 多实例登录被踢
|
|
|
- // - TIM.TYPES.KICKED_OUT_MULT_DEVICE 多终端登录被踢
|
|
|
- // - TIM.TYPES.KICKED_OUT_USERSIG_EXPIRED 签名过期被踢(v2.4.0起支持)。
|
|
|
- });
|
|
|
-
|
|
|
- // eslint-disable-next-line no-unused-vars
|
|
|
- this.tim.on(TIM.EVENT.NET_STATE_CHANGE, (event)=>{
|
|
|
- // 网络状态发生改变(v2.5.0 起支持)。
|
|
|
- // event.name - TIM.EVENT.NET_STATE_CHANGE
|
|
|
- // event.data.state 当前网络状态,枚举值及说明如下:
|
|
|
- // - TIM.TYPES.NET_STATE_CONNECTED - 已接入网络
|
|
|
- // - TIM.TYPES.NET_STATE_CONNECTING - 连接中。很可能遇到网络抖动,SDK 在重试。接入侧可根据此状态提示“当前网络不稳定”或“连接中”
|
|
|
- // - TIM.TYPES.NET_STATE_DISCONNECTED - 未接入网络。接入侧可根据此状态提示“当前网络不可用”。SDK 仍会继续重试,若用户网络恢复,SDK 会自动同步消息
|
|
|
- });
|
|
|
-
|
|
|
- // 开始登录
|
|
|
- this.tim
|
|
|
- .login({
|
|
|
- userID: this.userID.toString(),
|
|
|
- userSig: this.userSig,
|
|
|
- })
|
|
|
- .then((imResponse)=>{
|
|
|
- console.log(imResponse.data); // 登录成功
|
|
|
- if (window.ReactNativeWebView) {
|
|
|
- window.ReactNativeWebView.postMessage(
|
|
|
- `用户${this.userID}登录成功`
|
|
|
- );
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((imError)=> {
|
|
|
- console.log(imError)
|
|
|
- if (window.ReactNativeWebView) {
|
|
|
- window.ReactNativeWebView.postMessage(
|
|
|
- JSON.stringify(imError)
|
|
|
- );
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- sendMessage(text, toUserId) {
|
|
|
- let message = this.tim.createTextMessage({
|
|
|
- conversationType: TIM.TYPES.CONV_C2C,
|
|
|
- payload: {
|
|
|
- text,
|
|
|
- },
|
|
|
- to: toUserId,
|
|
|
- });
|
|
|
- this.tim.sendMessage(message);
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style lang="less" scoped></style>
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div @click="sendMessage('快点啊', '2211')">发送消息</div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapState } from 'vuex';
|
|
|
+
|
|
|
+import TIM from 'tim-js-sdk';
|
|
|
+import COS from 'cos-js-sdk-v5';
|
|
|
+// import axios from 'axios'
|
|
|
+export default {
|
|
|
+ name: '',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ SDKAppID: 1400375593,
|
|
|
+ userID: 2015,
|
|
|
+ userSig:
|
|
|
+ 'eJwtzMsKwjAURdF-ybRSbp6SgpPiRIjgo0VwJja1l6gNMUpA-HdL2*FZB-aXVOaYf2wgBWE5kMW4sbHPiC1ODFTO-mrcxXtsSEEFgACquJgemzwGO7iUkgHApBEfo2klNWeMzRW8DVmknc7KoPbJmU11jedTysAtW9dtexN39Z0f1n1gb1fDivz*cZcwNQ__',
|
|
|
+ tim: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['userInfo']),
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ window.chatLogin = this.chatLogin;
|
|
|
+ window.sendMessage=this.sendMessage;
|
|
|
+ // axios.get('http://dingdong.izouma.com/chat/getUserSig',{ params: {
|
|
|
+ // userId: '2015',
|
|
|
+ // },headers:{
|
|
|
+ // "Authorization":"Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxMzM2NTEzNTk3NiIsImV4cCI6MTU5OTczMzg4OCwiaWF0IjoxNTk3MTQxODg4fQ.759Fgdes9ZINQ8AS0BpyK1ua1zjIHGRy5UXd0Ectb1itFc6VfKc8ehzbG18NoocH-YhO53Rgx43lEjClhyetNA"
|
|
|
+ // }}).then(res=>{
|
|
|
+ // this.userSig=res.data
|
|
|
+ // this.chatLogin()
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ chatLogin(userID, userSig) {
|
|
|
+ if (userID) {
|
|
|
+ this.userID = userID;
|
|
|
+ }
|
|
|
+ if (userSig) {
|
|
|
+ this.userSig = userSig;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ // 创建 SDK 实例,TIM.create() 方法对于同一个 SDKAppID 只会返回同一份实例
|
|
|
+ let options = {
|
|
|
+ SDKAppID: this.SDKAppID, // 接入时需要将0替换为您的即时通信应用的 SDKAppID
|
|
|
+ };
|
|
|
+ this.tim = TIM.create(options); // SDK 实例通常用 tim 表示
|
|
|
+ // 设置 SDK 日志输出级别,详细分级请参见 setLogLevel 接口的说明
|
|
|
+ this.tim.setLogLevel(0); // 普通级别,日志量较多,接入时建议使用
|
|
|
+ // tim.setLogLevel(1); // release级别,SDK 输出关键信息,生产环境时建议使用
|
|
|
+
|
|
|
+ // 将腾讯云对象存储服务 SDK (以下简称 COS SDK)注册为插件,IM SDK 发送文件、图片等消息时,需要用到腾讯云的 COS 服务
|
|
|
+ // HTML5 环境,注册 COS SDK
|
|
|
+ this.tim.registerPlugin({ 'cos-js-sdk': COS });
|
|
|
+
|
|
|
+ // 监听事件,如:
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ this.tim.on(TIM.EVENT.SDK_READY, (event)=>{
|
|
|
+ // 收到离线消息和会话列表同步完毕通知,接入侧可以调用 sendMessage 等需要鉴权的接口
|
|
|
+ // event.name - TIM.EVENT.SDK_READY
|
|
|
+ });
|
|
|
+
|
|
|
+ this.tim.on(TIM.EVENT.MESSAGE_RECEIVED, (event)=>{
|
|
|
+ console.log(event);
|
|
|
+ // 收到推送的单聊、群聊、群提示、群系统通知的新消息,可通过遍历 event.data 获取消息列表数据并渲染到页面
|
|
|
+ // event.name - TIM.EVENT.MESSAGE_RECEIVED
|
|
|
+ // event.data - 存储 Message 对象的数组 - [Message]
|
|
|
+ if (window.ReactNativeWebView) {
|
|
|
+ window.ReactNativeWebView.postMessage(
|
|
|
+ JSON.stringify(event.data)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ this.tim.on(TIM.EVENT.MESSAGE_REVOKED, (event)=>{
|
|
|
+ // 收到消息被撤回的通知。使用前需要将SDK版本升级至v2.4.0或以上。
|
|
|
+ // event.name - TIM.EVENT.MESSAGE_REVOKED
|
|
|
+ // event.data - 存储 Message 对象的数组 - [Message] - 每个 Message 对象的 isRevoked 属性值为 true
|
|
|
+ });
|
|
|
+
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ this.tim.on(TIM.EVENT.MESSAGE_READ_BY_PEER, (event)=>{
|
|
|
+ // SDK 收到对端已读消息的通知,即已读回执。使用前需要将SDK版本升级至v2.7.0或以上。仅支持单聊会话。
|
|
|
+ // event.name - TIM.EVENT.MESSAGE_READ_BY_PEER
|
|
|
+ // event.data - event.data - 存储 Message 对象的数组 - [Message] - 每个 Message 对象的 isPeerRead 属性值为 true
|
|
|
+ });
|
|
|
+
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ this.tim.on(TIM.EVENT.CONVERSATION_LIST_UPDATED, (event)=>{
|
|
|
+ // 收到会话列表更新通知,可通过遍历 event.data 获取会话列表数据并渲染到页面
|
|
|
+ // event.name - TIM.EVENT.CONVERSATION_LIST_UPDATED
|
|
|
+ // event.data - 存储 Conversation 对象的数组 - [Conversation]
|
|
|
+ if (window.ReactNativeWebView) {
|
|
|
+ window.ReactNativeWebView.postMessage(
|
|
|
+ JSON.stringify(event)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ this.tim.on(TIM.EVENT.GROUP_LIST_UPDATED, (event)=>{
|
|
|
+ // 收到群组列表更新通知,可通过遍历 event.data 获取群组列表数据并渲染到页面
|
|
|
+ // event.name - TIM.EVENT.GROUP_LIST_UPDATED
|
|
|
+ // event.data - 存储 Group 对象的数组 - [Group]
|
|
|
+ });
|
|
|
+
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ this.tim.on(TIM.EVENT.PROFILE_UPDATED, (event)=>{
|
|
|
+ // 收到自己或好友的资料变更通知
|
|
|
+ // event.name - TIM.EVENT.PROFILE_UPDATED
|
|
|
+ // event.data - 存储 Profile 对象的数组 - [Profile]
|
|
|
+ });
|
|
|
+
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ this.tim.on(TIM.EVENT.BLACKLIST_UPDATED, (event)=>{
|
|
|
+ // 收到黑名单列表更新通知
|
|
|
+ // event.name - TIM.EVENT.BLACKLIST_UPDATED
|
|
|
+ // event.data - 存储 userID 的数组 - [userID]
|
|
|
+ });
|
|
|
+
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ this.tim.on(TIM.EVENT.ERROR, (event)=>{
|
|
|
+ // 收到 SDK 发生错误通知,可以获取错误码和错误信息
|
|
|
+ // event.name - TIM.EVENT.ERROR
|
|
|
+ // event.data.code - 错误码
|
|
|
+ // event.data.message - 错误信息
|
|
|
+ });
|
|
|
+
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ this.tim.on(TIM.EVENT.SDK_NOT_READY, (event)=>{
|
|
|
+ // 收到 SDK 进入 not ready 状态通知,此时 SDK 无法正常工作
|
|
|
+ // event.name - TIM.EVENT.SDK_NOT_READY
|
|
|
+
|
|
|
+ if (window.ReactNativeWebView) {
|
|
|
+ window.ReactNativeWebView.postMessage(
|
|
|
+ JSON.stringify(event)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ this.tim.on(TIM.EVENT.KICKED_OUT, (event)=>{
|
|
|
+ // 收到被踢下线通知
|
|
|
+ // event.name - TIM.EVENT.KICKED_OUT
|
|
|
+ // event.data.type - 被踢下线的原因,例如 :
|
|
|
+ // - TIM.TYPES.KICKED_OUT_MULT_ACCOUNT 多实例登录被踢
|
|
|
+ // - TIM.TYPES.KICKED_OUT_MULT_DEVICE 多终端登录被踢
|
|
|
+ // - TIM.TYPES.KICKED_OUT_USERSIG_EXPIRED 签名过期被踢(v2.4.0起支持)。
|
|
|
+ });
|
|
|
+
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ this.tim.on(TIM.EVENT.NET_STATE_CHANGE, (event)=>{
|
|
|
+ // 网络状态发生改变(v2.5.0 起支持)。
|
|
|
+ // event.name - TIM.EVENT.NET_STATE_CHANGE
|
|
|
+ // event.data.state 当前网络状态,枚举值及说明如下:
|
|
|
+ // - TIM.TYPES.NET_STATE_CONNECTED - 已接入网络
|
|
|
+ // - TIM.TYPES.NET_STATE_CONNECTING - 连接中。很可能遇到网络抖动,SDK 在重试。接入侧可根据此状态提示“当前网络不稳定”或“连接中”
|
|
|
+ // - TIM.TYPES.NET_STATE_DISCONNECTED - 未接入网络。接入侧可根据此状态提示“当前网络不可用”。SDK 仍会继续重试,若用户网络恢复,SDK 会自动同步消息
|
|
|
+ });
|
|
|
+
|
|
|
+ // 开始登录
|
|
|
+ this.tim
|
|
|
+ .login({
|
|
|
+ userID: this.userID.toString(),
|
|
|
+ userSig: this.userSig,
|
|
|
+ })
|
|
|
+ .then((imResponse)=>{
|
|
|
+ console.log(imResponse.data); // 登录成功
|
|
|
+ if (window.ReactNativeWebView) {
|
|
|
+ window.ReactNativeWebView.postMessage(
|
|
|
+ `用户${this.userID}登录成功`
|
|
|
+ );
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((imError)=> {
|
|
|
+ console.log(imError)
|
|
|
+ if (window.ReactNativeWebView) {
|
|
|
+ window.ReactNativeWebView.postMessage(
|
|
|
+ JSON.stringify(imError)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ sendMessage(text, toUserId) {
|
|
|
+ let message = this.tim.createTextMessage({
|
|
|
+ conversationType: TIM.TYPES.CONV_C2C,
|
|
|
+ payload: {
|
|
|
+ text,
|
|
|
+ },
|
|
|
+ to: toUserId,
|
|
|
+ });
|
|
|
+ this.tim.sendMessage(message);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped></style>
|