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

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

 26266  225  查看评论 (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

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

bootstrap登录注册表单切换页面

简洁通用的登录和注册表单弹窗切换,这是一款基于html5 css3 bootstrap创建的响应式登录注册页面模板
  丰富的输入
 33177  308

EmojiOne表情符号所见即所得的文本编辑器

emojionearea.js是一款可集成EmojiOne表情符号的所见即所得的jQuery文本编辑器插件。emojionearea.js允许你将任何的HTML元素转换为WYSIWYG文本编辑器,并且它能够在编辑器中使用Emojione图标。
  丰富的输入
 44046  343

jQuery H5电子签名

H5电子签名demo,支持移动端
  丰富的输入
 55361  434

移动端答题切换插件

移动端自适应答题插件,通过循环json获取数据
  丰富的输入
 27250  359

讨论这个项目(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来添加新的接口。这个确实不好解耦😥
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复