【开箱即用】开发了一个基于环信IM聊天室的Vue3插件,从而快速实现仿直播间聊天窗功能

前言

由于看到有部分的需求为在页面层,快速的引入一个包,并且以简单的配置,就可以快速实现一个聊天窗口,因此尝试以 Vue3 插件的形式开发一个轻量的聊天窗口。

这次简单分享一下此插件的实现思路,以及实现过程,并描述一下本次插件发布 npm 的过程。

技术栈

  • Vue3
  • pnpm
  • Typescript
  • Vite

插件核心目录设计

📦 emchat-chatroom-widget
┣ 📂 build // 插件打包输出的目录
┣ 📂 demo // 验证插件demo相关目录
┣ 📂 scripts // 打包脚本目录
┣ 📂 src // 插件源代码
┃   ┣ 📂 components // 组件目录
┃   ┣ 📂 container // 容器组件目录
┃   ┣ 📂 EaseIM // 环信IM相关目录
┃   ┣ 📂 utils // 工具相关目录
┃   ┣ 📜 index.ts // 插件入口文件
┃   ┗ 📜 install.ts // 插件初始化文件
┣ 📜 package.json // 项目配置文件
┣ 📜 vite.config.ts // vite配置文件
┗ 📜 README.md // 项目说明文档
...

实现过程

确认功能范围

首先确认本次插件实现的功能范围,从而围绕要实现的功能着手进行开发准备。

  1. Vue3 框架使用
  2. 轻量配置、仅配置少量参数即可立即使用聊天功能
  3. 页面大小自适应,给定容器宽高,插件内部宽高自适应。
  4. 仅聊天室类型消息支持基础文本,表情,图片。
    暂时第一期仅支持这些功能范围。

着手开发

1、创建空白项目

pnpm create vite emchat-chatroom-widget --template vue-ts

2、配置eslint pretter 等代码校验、以及代码风格工具。

pnpm i eslint eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser -D
pnpm i prettier eslint-config-prettier eslint-plugin-prettier -D

同时也不要忘了创建对应的 .eslintrc.cjs.prettierrc.cjs

这里遇到了一个问题:

这几个文件以 cjs 结尾是因为 package.json 创建时设置了"type": "module" 后你的所有 js 文件默认使用 ESM 模块规范,不支持 commonjs 规范,所以必须显式的声明成 xxx.cjs 才能标识这个是用 commonjs 规范的,把你的配置都改成.cjs 后缀。

3、配置 scripts 打包脚本

目录下新建一个文件夹命名为scripts,新加一个 build.js 或者为.ts 文件。

在该文件中引入vite进行打包时的配置。由于本次插件编写时使用了jsx语法进行编写,因此 vite 打包时也需要引入 jsx 打包插件。
安装@vitejs/plugin-vue-jsx插件。

const BASE_VITE_CONFIG = defineConfig({publicDir: false, //暂不需要打包静态资源到public文件夹plugins: [vue(),vueJSX(),// visualizer({//   emitFile: true,//   filename: "stats.html"// }),dts({outputDir: './build/types',insertTypesEntry: true, // 插入TS 入口copyDtsFiles: true, // 是否将源码里的 .d.ts 文件复制到 outputDir}),],
});

package.json中增加 build 脚本执行命令,

  "scripts": {"dev": "vite","build": "vue-tsc && vite build","preview": "vite preview","lint": "eslint src --fix","build:widget": "node ./scripts/build.js"},

整体 build.js 代码由于篇幅关系,可以后面查看文末的源码地址。

4、 编写 Vue3 插件入口函数

import type { App } from 'vue';
import EasemobChatroom from './container';
import { initEMClient } from './EaseIM';
export interface IEeasemobOptions {appKey: string;
}export default {install: (app: App, options: IEeasemobOptions) => {// 在这里编写插件代码console.log(app);console.log('options', options);if (options && options?.appKey) {initEMClient(options.appKey);} else {throw console.error('appKey不能为空');}app.component(EasemobChatroom.name, EasemobChatroom);},
};

5、聊天插件入口代码

聊天插件入口组件主要用来接收插件使用者所传递进来的一些必要参数,比如登录用户 id、密码、token、聊天室 id,以及针对初始化插件的初始状态。

import { defineComponent, onMounted } from "vue"
import { EMClient } from "../EaseIM"
import { useManageChatroom } from "../EaseIM/mangeChatroom"
import { manageEasemobApis } from "../EaseIM/imApis"
import "./style/index.css"
/* components */
import MessageContainer from "./message"
import InputBarContainer from "./inputbar"
console.log("EMClient", EMClient)
export default defineComponent({name: "EasemobChatroom",props: {username: {type: String,default: "",required: true},password: {type: String,default: ""},accessToken: {type: String,default: ""},chatroomId: {type: String,default: "",required: true}},setup(props) {const { setCurrentChatroomId } = useManageChatroom()const { loginIMWithPassword, loginIMWithAccessToken } = manageEasemobApis()const loginIM = async (): Promise<void> => {if (!EMClient) returntry {if (props.accessToken) {await loginIMWithAccessToken(props.username, props.accessToken)} else {await loginIMWithPassword(props.username, props.password)}} catch (error: any) {throw `${error.data.message}`}}const closeIM = async (): Promise<void> => {console.log(">>>>>断开连接")//   EMClient.close()}onMounted(() => {loginIM()if (props.chatroomId) {setCurrentChatroomId(props.chatroomId)}})return {loginIM,closeIM}},render() {return (<><div class={"easemob_chatroom_container"}><MessageContainer /><InputBarContainer /></div></>)}
})

6、输入框组件代码

主要处理插件输入框功能,实现消息文本内容,图片内容的发送。

import { defineComponent, ref } from "vue"
import { EasemobChat } from "easemob-websdk"
import { EMClient } from "../EaseIM"
import { useManageChatroom } from "../EaseIM/mangeChatroom"
/* compoents */
import InputEmojiComponent from "../components/InputEmojiComponent"
import UploadImageComponent from "../components/UploadImageComponent"
import "./style/inputbar.css"
export enum PLACE_HOLDER_TEXT {TEXT = "Enter 发送输入的内容..."
}
export default defineComponent({name: "InputBarContainer",setup() {//基础文本发送const inputContent = ref("")const setInputContent = (event: Event) => {inputContent.value = (event.target as HTMLInputElement).value}const { currentChatroomId, loginUserInfo, sendDisplayMessage } =useManageChatroom()const sendMessage = async (event: KeyboardEvent) => {if (inputContent.value.match(/^\s*$/)) returnif (event.code === "Enter" && !event.shiftKey) {event.preventDefault()console.log(">>>>>>调用发送方法")const param: EasemobChat.CreateTextMsgParameters = {chatType: "chatRoom",type: "txt",to: currentChatroomId.value,msg: inputContent.value,from: EMClient.user,ext: {nickname: loginUserInfo.nickname}}try {await sendDisplayMessage(param)inputContent.value = ""} catch (error) {console.log(">>>>>消息发送失败", error)}}}const appendEmojitoInput = (emoji: string) => {inputContent.value = inputContent.value + emoji}return () => (<><div class={"input_bar_container"}><div class={"control_strip_container"}><InputEmojiComponent onAppendEmojitoInput={appendEmojitoInput} /><UploadImageComponent /></div><div class={"message_content_input_box"}><inputclass={"message_content_input"}type="text"value={inputContent.value}onInput={setInputContent}placeholder={PLACE_HOLDER_TEXT.TEXT}onKeyup={sendMessage}/></div></div></>)}
})

7、消息列表组件代码

渲染聊天室内收发的消息代码,以及列表滚动。

import { defineComponent, nextTick, watch } from 'vue';
import { useManageChatroom } from '../EaseIM/mangeChatroom';
import { scrollBottom } from '../utils';
import './style/message.css';
import { EasemobChat } from 'easemob-websdk';
const { messageCollect } = useManageChatroom();const MessageList = () => {const downloadSourceImage = (message: EasemobChat.MessageBody) => {if (message.type === 'img') {window.open(message.url);}};return (<>{messageCollect.length > 0 &&messageCollect.map((msgItem) => {return (<div class={'message_item_box'} key={msgItem.id}><div class={'message_item_nickname'}>{msgItem?.ext?.nickname || msgItem.from}</div>{msgItem.type === 'txt' && (<p class={'message_item_textmsg'}>{msgItem.msg}</p>)}{msgItem.type === 'img' && (<imgstyle={'cursor: pointer;'}onClick={() => {downloadSourceImage(msgItem);}}src={msgItem.thumb}/>)}</div>);})}</>);
};
export default defineComponent({name: 'MessageContainer',setup() {watch(messageCollect, () => {console.log('>>>>>>监听到消息列表改变');nextTick(() => {const messageContainer = document.querySelector('.message_container');setTimeout(() => {messageContainer && scrollBottom(messageContainer);}, 300);});});return () => {return (<><div class='message_container'><MessageList /></div></>);};},
});

8、聊天室内核心方法

聊天室内部分状态管理

import { EasemobChat } from "easemob-websdk"
import { reactive, ref } from "vue"
import { DisplayMessageType, ILoginUserInfo } from "../types/index"
import { manageEasemobApis } from "../imApis/"
const messageCollect = reactive<DisplayMessageType[]>([])
const loginUserInfo: ILoginUserInfo = {loginUserId: "",nickname: ""
}
const currentChatroomId = ref("")
export const useManageChatroom = () => {const setCurrentChatroomId = (roomId: string) => {currentChatroomId.value = roomId}const setLoginUserInfo = async (loginUserId: string) => {const { fetchLoginUserNickname } = manageEasemobApis()loginUserInfo.loginUserId = loginUserIdtry {const res = await fetchLoginUserNickname(loginUserId)loginUserInfo.nickname = res[loginUserId].nicknameconsole.log(">>>>>>获取到用户属性", loginUserInfo.nickname)} catch (error) {console.log(">>>>>>获取失败")}}const pushMessageToList = (message: DisplayMessageType) => {messageCollect.push(message)}const sendDisplayMessage = async (payload: EasemobChat.CreateMsgType) => {const { sendTextMessage, sendImageMessage } = manageEasemobApis()return new Promise((resolve, reject) => {if (payload.type === "txt") {sendTextMessage(payload).then(res => {messageCollect.push(res as unknown as EasemobChat.TextMsgBody)resolve(res)}).catch(err => {reject(err)})}if (payload.type === "img") {sendImageMessage(payload).then(res => {messageCollect.push(res as unknown as EasemobChat.ImgMsgBody)resolve(res)}).catch(err => {reject(err)})}})}return {messageCollect,currentChatroomId,loginUserInfo,setCurrentChatroomId,sendDisplayMessage,pushMessageToList,setLoginUserInfo}
}

实例化 IM SDK

import EaseSDK, { EasemobChat } from "easemob-websdk"
import { mountEaseIMListener } from "./listener"
export let EMClient = {} as EasemobChat.Connection
export const EMCreateMessage = EaseSDK.message.create
export const initEMClient = (appKey: string) => {EMClient = new EaseSDK.connection({appKey: appKey})mountEaseIMListener(EMClient)return EMClient
}

挂载聊天室相关监听监听

import { EasemobChat } from 'easemob-websdk';
import { useManageChatroom } from '../mangeChatroom';
import { manageEasemobApis } from '../imApis';
export const mountEaseIMListener = (EMClient: EasemobChat.Connection) => {const { pushMessageToList, setLoginUserInfo, currentChatroomId } =useManageChatroom();const { joinChatroom } = manageEasemobApis();console.log('>>>mountEaseIMListener');EMClient.addEventHandler('connection', {onConnected: () => {console.log('>>>>>onConnected');joinChatroom();setLoginUserInfo(EMClient.user);},onDisconnected: () => {console.log('>>>>>Disconnected');},onError: (error: any) => {console.log('>>>>>>Error', error);},});EMClient.addEventHandler('message', {onTextMessage(msg) {if (msg.chatType === 'chatRoom' && msg.to === currentChatroomId.value) {pushMessageToList(msg);}},onImageMessage(msg) {if (msg.chatType === 'chatRoom' && msg.to === currentChatroomId.value) {pushMessageToList(msg);}},});EMClient.addEventHandler('chatroomEvent', {onChatroomEvent(eventData) {console.log('>>>>chatroomEvent', eventData);},});
};

使用方式

npm install emchat-chatroom-widget
import EMChatroom from "emchat-chatroom-widget/emchat-chatroom-widget.esm.js"
//引入插件内部样式
import "emchat-chatroom-widget/style.css"
//appKey 需从环信申请
createApp(App).use(EMChatroom, {appKey: "easemob#XXX"}).mount("#app")//模版组件内使用/*** @param {username} string* @param {password} string* @param {accessToken} string* @param {chatroomId} string*/<EasemobChatroom:username="'hfp'":password="'1'":chatroomId="'208712152186885'"></EasemobChatroom>

最终效果

image.png

相关代码

Github 源码地址

npm 相关包地址

参考资料

注册环信

环信官方 Web 端相关文档

【前端工程化-组件库】从 0-1 构建 Vue3 组件库(组件开发)

使用 TSX 编写 Vue3 组件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/112129.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

day06_Java中的流程控制语句

流程控制 简单来讲所谓流程就是完成一件事情的多个步骤组合起来就叫做一个流程。在一个程序执行的过程中&#xff0c;各条语句的执行顺序对程序的结果是有直接影响的。我们必须清楚每条语句的执行流程。而且&#xff0c;很多时候要通过控制语句的执行顺序来实现我们想要的功能…

铁矿石 稀土总量的测定 电感耦合等离子体原子发射光谱法

声明 本文是学习GB-T 6730.84-2023 铁矿石 稀土总量的测定 电感耦合等离子体原子发射光谱法. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本文件描述了电感耦合等离子体原子发射光谱法测定稀土总量的方法。 本文件适用于铁矿石、铁精矿、…

华为aarch64架构的泰山服务器EulerOS 2.0 (SP8)系统离线安装saltstack3003.1实践

华为泰山服务器的CPU芯片架构为aarch64&#xff0c;所装系统为EulerOS 2.0 (SP8)aarch64系统&#xff0c;安装saltstack比较困难。本文讲解通过pip安装方式离线安装saltstack3003.1以进行集中化管理和维护。 一、系统环境 1、操作系统版本 [rootlocalhost ~]# cat /etc/os-r…

五层网络模型

分层的意义 当遇到一个复杂问题的时候&#xff0c;可以使用分层的思想把问题简单化 比如&#xff0c;你有半杯82年的可乐&#xff0c;想分享给你的朋友王富贵&#xff0c;但你们已经10年没有联系了。要完成这件事&#xff0c;你可能要考虑&#xff1a; 我用什么装可乐&#x…

企业架构LNMP学习笔记48

数据结构类型操作&#xff1a; 数据结构&#xff1a;存储数据的方式 数据类型 算法&#xff1a;取数据的方式&#xff0c;代码就把数据进行组合&#xff0c;计算、存储、取出。 排序算法&#xff1a;冒泡排序、堆排序 二分。 key&#xff1a; key的命名规则不同于一般语言…

RFID设备在自动化堆场中的管理应用

随着信息技术的高速发展&#xff0c;带动了港口生产和管理技术的长足进步&#xff0c;港口堆场内的自动化场桥的智能化水平成为码头提高生产率一个重要标签。各地海关着力于现代化科技手段&#xff0c;努力构筑新型的便捷通关模式&#xff0c;在进出口环节做好管理和服务。 全…

回溯算法 解题思路

文章目录 算法介绍回溯算法能解决的问题解题模板1. 组合问题2. N皇后问题 算法介绍 回溯法&#xff08;Back Tracking Method&#xff09;&#xff08;探索与回溯法&#xff09;是一种选优搜索法&#xff0c;又称为试探法&#xff0c;按选优条件向前搜索&#xff0c;以达到目标…

彩色相机工作原理——bayer格式理解

早期&#xff0c;图像传感器只能记录光的强弱&#xff0c;无法记录光的颜色&#xff0c;所以只能拍摄黑白照片。 1974年,拜尔提出了bayer阵列&#xff0c;发明了bayer格式图片。不同于高成本的三个图像传感器方案&#xff0c;拜尔提出只用一个图像传感器&#xff0c;在其前面放…

Linux系统编程6(线程互斥,锁,同步,生产消费模型)

上篇文章介绍完线程的概念后&#xff0c;我们将在这篇文章中初步探讨线程编程以及线程应用中的问题&#xff0c;这篇文章将以抢票系统为例&#xff0c;贯穿整篇文章。笔者将介绍在多线程编程中会出现的问题&#xff0c;什么是同步&#xff1f;什么是互斥&#xff1f;为什么多线…

小米手机安装面具教程(Xiaomi手机获取root权限)

文章目录 1.Magisk中文网&#xff1a;2.某呼&#xff1a;3.最后一步打开cmd命令行输入的时候:4.Flash Boot 通包-Magisk&#xff08;Flash Boot通刷包&#xff09;5.小米Rom下载&#xff08;官方刷机包&#xff09;6.Magisk最新版本国内源下载 1.Magisk中文网&#xff1a; htt…

markdown工具Atom预览与插件安装

​atom是以命令行作为插件选项的入口 打开命令输入框 Windows: ctrl shift p Mac: command shift p 输入命令安装 输入 markdown preview toggle &#xff0c;可以偷懒只输入mdpt(模糊匹配) 按enter键即可看到预览&#xff0c;如图&#xff0c;左边编辑&#xff0c;右…

KubeSphere 在互联网医疗行业的应用实践

作者&#xff1a;宇轩辞白&#xff0c;运维研发工程师&#xff0c;目前专注于云原生、Kubernetes、容器、Linux、运维自动化等领域。 前言 2020 年我国互联网医疗企业迎来了“爆发元年”&#xff0c;越来越多居民在家隔离期间不方便去医院看诊&#xff0c;只好采取在线诊疗的手…