MChat

简体中文 | English

如果觉得还行,请给一个👉 star,谢谢😎 ! 有疑问请加群。

简介

这是一款基于 vue.js 开发的聊天室组件库，在提供基础封装的同时，最大程度的增加扩展性。

下面是效果演示图：

MChat组件效果图：

IChat组件效果图：

🌰 加群获得群聊版本代码

群聊演示地址 静态效果演示

• Github
• Gitee

项目来由

vue-mchat 是本人前端阶段性学习总结的项目，因为并非前端开发工程师所以还是有不少瑕疵。

如果有问题或者需求可以加群问，或者提 `Issues`!

如何安装

• 使用 npm 安装

  npm install vue-mchat
  

使用

在main.js中引入

# npm 下载方式
// 进入css
import 'MChat/lib/MChat.css'
//引入组件
import MChat from 'MChat'
// 使用vue加载组件
Vue.use(MChat)
# 

如何进行二次开发

方案一：

直接将 pacages 文件夹复制到你需要的项目，在 main.js 中引入 vue-mchat:

import App from './App.vue'
import MChat from '../packages/index'

Vue.use(MChat)

方案二：

在 vue-mchat 的基础上进行开发，通过打包成js库引入：

在 vue-mchat 目录下执行：

npm run lib 

可获得 lib 文件其中包含 MChat 的编译文件库，将 lib 整个复制到项目里，在 main.js 中引入:

import  '../lib/MChat.css'
import MChat from '../lib/MChat.umd'

Vue.use(MChat)

组件API

可以根据 src/test/ 下的 Test.vue 进行静态调试

MChat 与 IChat 的区别

MChat 只具备有基础的 WebIM 功能，它没有用户管理及群组模块，则意味着你需要自己掌控数据变化。适用场景：客服系统

IChat 是模仿 Mac 上的 QQ 进行设计的，它封装了用户群组管理的数据模块，你只需要对接API就能使用。适用场景：独立的 WebIM

MChat

Attributes

config MChat配置信息

mine 我的信息

chats 会话属性

Content talk content format

Methods

窗口级事件

MChat Events

            let message = {
                    //消息来源用户名
                    username: '七月'
                    //消息来源用户头像
                    avatar: avatar,
                    //消息的来源ID（如果是私聊，则是用户id，如果是群聊，则是群组id）
                    id: 1001,
                    //聊天窗口来源类型，从发送消息传递的to里面获取
                    type: 'group',
                    //消息内容  请看 Attributes 中的content说明
                    content:'你好',
                    //消息id，可不传。除非你要对消息进行一些操作（如撤回）
                    cid: 0,
                    //是否我发送的消息，如果为true，则会显示在右方
                    mine: true,
                    //消息的发送者id（比如群组中的某个消息发送者），可用于自动解决浏览器多窗口时的一些问题
                    fromid: 10002,
                    //服务端时间戳毫秒数。注意：如果你返回的是标准的 unix 时间戳，记得要 *1000
                    timestamp: new date(),
                  };
                  // 方法一、 通过内置MChat的event 随时随地引用
                  this.$im.emit("getMessage", message);
                  // 方法二、
                  this.$refs[MChatname].getMessage(message)
        

IChat

Attributes

mine 我的信息

初始化

    let data = {
      // 好友列表
      friends: this.friendList,
      // 群组列表
      groups: this.groupList,
      // 系统消息列表
      messages: this.systemMessage,
    };
     this.$nextTick(() => {
      this.$refs.IChat.setData(data);
    });

groups 群组列表数据格式

 [{
                id: 1,
                cid: 123401,
                name: "怜",
                remark: '剑圣',
                online: false,
                avatar: require("../public/avatar/lian.png"),
                sign: "继续下去的话优衣会生气的。"
            }]

friends 好友列表数据格式

 [ {
                id: 1,
                cid: 123401,
                name: "怜",
                remark: '剑圣',
                online: true,
                avatar: require("../public/avatar/lian.png"),
                sign: "继续下去的话优衣会生气的。"
            },]

messages 系统消息列表数据格式

       {
            id: 0,
            name: '真琴',
            avatar: require("../public/avatar/zhenqin.png"),
        },
    

       {
            id: 0,
            name: '真琴',
            avatar: require("../public/avatar/zhenqin.png"),
        },
    

[
    {
        id: 1,
        from:
        {
            id: 0,
            name: '草野优衣',
            avatar: require("../public/avatar/ue.png"),
        },
        to:
        {
            id: 1,
            name: '七月',
            avatar: require("../public/avatar/avatar_meteor.png"),
        },
        type: 'acceptFriend',
        message: '111',
        timestamp: undefined
    },
]

Methods

IChat 将全部事件集中到了 bindEvent(event, data) 上:

  <IChat ref="IChat" :config="config" :mine="mine" @bindEvent="handleEvent">
    </IChat>

bindEvent 包含以下事件

Event

初始化 IChat 数据:

  this.$refs.IChat.setData();

更新群组列表 groups:

  this.$refs.IChat.setGroups();

更新好友列表 friends:

  this.$refs.IChat.setFriends();

更新系统消息列表 messages:

  this.$refs.IChat.setSystemMessage();

新的系统消息:

  this.$refs.IChat.newSystemMessage();

新消息:

  this.$refs.IChat.getMessage();

** 如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 或者 发邮件给我，根据star和watch的人数进行下一步更新

MChat-right-box

** 通过 Scoped slot 可以获取到 chat (内部的状态管理）的数据，用法参考 demo。

MChat-group-list

Attributes

Methods

QQ交流群

Browsers support

Modern browsers and Internet Explorer 10+.

IE / Edge	Firefox	Chrome	Safari
IE10, IE11, Edge	last 2 versions	last 2 versions	last 2 versions

License

MIT

Copyright (c) 2020-present july-meteor