Vue Cli 3项目使用融云IM实现聊天功能的方法

首先我们需要了解一下Vue Cli 3和融云IM的基本概念：

Vue Cli 3是一个基于Vue.js进行快速开发的完整系统，帮助开发者搭建一套可靠、高效的前端工作流。

融云IM（Instant Messaging）是一款具有即时通信功能的云通信服务，支持发送文本、图片、音频、视频等多种消息类型，适用于各种在线聊天场景。

实现聊天功能的步骤如下：

1.创建项目

安装Vue Cli 3，创建Vue项目

vue create chat-demo
cd chat-demo
npm run serve

2.添加融云IM的支持

安装融云IM JavaScript SDK

npm install rongcloud-web-sdk

在Vue组件中引用SDK，初始化SDK

import RongIMLib from 'rongcloud-web-sdk';

export default {
  mounted() {
    let appKey = 'your app key';
    let token = 'your token';

    RongIMLib.RongIMClient.init(appKey);
    RongIMLib.RongIMClient.connect(token, {
      onSuccess(userId) {
        console.log('Connected successfully: ' + userId);
      },
      onError(errorCode) {
        console.log('Failed to connect RongCloud: ' + errorCode);
      }
    });
  },
};

3.注册用户

用户注册是使用融云IM时必须的步骤，使用SDK提供的API完成用户注册

import RongIMLib from 'rongcloud-web-sdk';

export default {
  methods: {
    registerUser(userId, userName, portraitUri) {
      let user = new RongIMLib.User(userId, userName, portraitUri);
      RongIMLib.RongIMClient.getInstance().register(user, {
        onSuccess() {
          console.log('Registered successfully');
        },
        onError(errorCode) {
          console.log('Failed to register: ' + errorCode);
        }
      });
    },
  },
};

4.显示聊天窗口

使用融云IM SDK中提供的UI组件，在Vue组件中引用融云IM的样式和组件，实现聊天窗口的显示

<template>
  <div>
    <div class="chat-window">
      <div class="conversation-container"></div>
    </div>
  </div>
</template>

<style scoped>
@import url("https://cdn.ronghub.com/RongIMLib-2.9.0.min.css");
</style>

<script>
import RongIMLib from 'rongcloud-web-sdk';

export default {
  mounted() {
    let appKey = 'your app key';
    let token = 'your token';

    RongIMLib.RongIMClient.init(appKey);
    RongIMLib.RongIMClient.connect(token, {
      onSuccess(userId) {
        console.log('Connected successfully: ' + userId);
        let conversationList = RongIMLib.RongIMClient.getInstance().getConversationList();
        let config = {
          style: {
            width: '600px',
            height: '500px',
            bottom: '100px',
            right: '50px',
          },
        };
        RongIMLib.RongIMClient.getInstance().ui.conversationList.init(
          document.querySelector('.conversation-container'),
          config,
        );
      },
      onError(errorCode) {
        console.log('Failed to connect RongCloud: ' + errorCode);
      }
    });
  },
};
</script>

这里的代码显示了在Vue组件中如何显示聊天窗口，并将其初始化

5.发送消息

使用SDK提供的API向服务器发送消息

import RongIMLib from 'rongcloud-web-sdk';

export default {
  methods: {
    sendMessage(targetId, message) {
      let content = {
        content: message,
        extra: 'extra data',
      };
      let chatType = RongIMLib.ConversationType.PRIVATE;
      let msg = new RongIMLib.TextMessage(content);
      RongIMLib.RongIMClient.getInstance().sendMessage(chatType, targetId, msg, {
        onSuccess(msg) {
          console.log('Sent message successfully: ' + msg);
        },
        onError(errorCode, msg) {
          console.log('Failed to send message: ' + msg);
        }
      });
    },
  },
};

6.接收消息

使用SDK提供的API监听服务器发来的消息

import RongIMLib from 'rongcloud-web-sdk';

export default {
  created() {
    RongIMLib.RongIMClient.getInstance().setOnReceiveMessageListener({
      onReceived(message) {
        console.log('Received message: ' + message);
      }
    });
  },
};

这里的代码显示了在创建Vue组件时，如何初始化SDK，以及如何监听服务器发来的消息

示例：

1.发送文本消息

this.$refs.chat.sendMessage(this.targetId, this.messageInput);

这里的代码在Vue组件中获取了目标用户的ID和发送的消息，然后通过Vue的ref属性调用sendMessage方法，将消息发送给服务器。

2.接收文本消息

this.$refs.chat.onReceived(function(msg) {
  console.log(msg);
});

这里的代码监听服务器发来的消息，并将其输出到控制台，供开发者调试。