纯js网页在线聊天对话插件(原创)

所属分类:输入,UI-丰富的输入,对话框

 25618  224  查看评论 (3)
分享到微信朋友圈
X
纯js网页在线聊天对话插件(原创) ie兼容12

更新时间:2020-04-06 21:59:05

1、首部引入

<script src="chat_module/js/axios.min.js"></script>
<script src="chat_module/js/mock-min.js"></script>
<script src="chat_module/js/chat-module.min.js"></script>

2、使用方式仅一行代码

var cm = new ChatModule({mock_mode:true}); 
//mock_mode传false时不会加载mockjs,会真正发起对应url请求

3、因模拟后端数据,演示用例额外引入axios和mockjs用于模拟前端请求数据,各位可以根据自己项目实际情况换成其他请求方式如ajax等

4、目前提供四个方法,打开/关闭聊天窗体,发送/接收消息。

cm.show(); //展示窗体
cm.hide(); //隐藏窗体
cm.sendMsg(); //发送消息(默认已实现)
cm.receiveMsg(msg_obj); //接收消息 var msg_obj = {thumb_url:'', content:''};

5、目前完成界面展示用到的5个rest接口url如下,限于篇幅,具体的请求方式和返回参数结构请直接在js文件里ctrl+f查找:

/users/me 获取当前用户信息
/recent/chats 获取最近会话列表信息
/chats/details 获取单个会话详细信息
/users/groups 获取好友列表分组
/notices/list 获取系统通知列表

6、写这个插件发现越写越依赖于后端的设计,后续会在此版本上继续更新,包括后端数据库设计,rest接口实现,redis缓存等,结合websocket继续完善前端,最终会将这个插件部署到云上去,到时候会有更丰富的演示和更友好的api界面。感兴趣的小伙伴可以点个收藏不迷路~

7、使用过程中有任何疑问可以联系作者,QQ:604712572

相关插件-丰富的输入,对话框

移动端canvas实现涂鸦效果

实现涂鸦基本功能、更改笔触大小颜色、更改背景图、橡皮檫、历史记录、清屏和保存功能。
  丰富的输入
 26005  335

一款jQuery评论插件

jQuery评论插件,带表情,数量可随意添加,数据保存到本地缓存,刷新不丢失。
  丰富的输入
 22578  267

jQuery带表情的评论框

jQuery带表情的评论框,可自己随意添加表情框,简单方便
  丰富的输入
 34437  334

jQuery移动端自制画板

可以使用多种颜色画笔进行图画,有橡皮擦,代码注释较全容易扩展。注意请在移动端查看效果!
  丰富的输入
 28202  301

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    正焕 0
    2022/1/16 0:15:19
    Maco哥哥 0
    2021/9/19 5:05:58
    这个写得很好,真的。但是如果能写成插件的形式就最好了,现在是直接改你的js里面的文件,耦合太高了,而不是引用js文件就可以利用api来使用。
        一个大写的萌比0
        2021/11/25 15:42:12
        谢谢。现在算个半插件吧,因为引入js后初始化就能使项目快速引入一个基础的聊天窗体,但是由于实际项目中的聊天系统注定是离不开后台交互的,所以在使用的时候不同的项目会有自己的rest接口命名或者自己项目风格的请求方式(默认使用的axios),很难避免不直接修改源js(如果你的项目能够按照源js里的5个请求名,并且不打算新增其它的接口,你就可以仅引用js而不修改它);再加上为了方便扩展,所以目前只提供了5个最基本的接口交互。在实际项目使用中会有远不止这5种基础请求,也是不可避免再继续修改源js来添加新的接口。这个确实不好解耦😥
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复