vue.js+socket.io+express+mongodb打造在线聊天[一]

vue.js+socket.io+express+mongodb打造在线聊天

在线地址观看

http://www.chenleiming.com/vuechat

github地址

https://github.com/clm960227/...

有喜欢的小哥哥，小姐姐请反手来个star，谢谢！有issue的欢迎提出

介绍
本项目基于vue.js+socket.io+express+mongodb实现的聊天效果，界面以及功能参考QQ，微信
技术栈

前端： vue,vue-router,vuex,axios
构建： webpack，vue-cli
后端： express，multer(上传图片)，cors(跨域处理), superagent(调用机器人接口),mongoose(操作数据库)
通讯： socket.io
数据库： mongodb
css预处理器： sass

功能列表

用户注册
用户登录
群聊
群聊中@小美和机器人聊天（注意@小美和消息中间要有空格）
机器人聊天
留言板

聊天代码
前端

        // 聊天监听this.socket.on('chat-msg', (msg) => {this.MsgList.push(msg)this.$nextTick(() => {this.msgDOM.scrollTop = this.msgDOM.scrollHeight})})// 发送消息const MsgObj = {roomId: this.roomId,timeStamp: Date.parse(new Date()),userId: this.getUserinfo.userId,headPic: this.getUserinfo.headPic,nickname: this.getUserinfo.nickname,text: this.InputMsg}this.socket.emit('chat-msg', MsgObj)this.InputMsg = ''

后端

    // 进入房间socket.on('join-room', (info) => {// 添加到房间socket.join(info.roomId)io.to(info.roomId).emit('join-room', info.nickname)})// 群聊天socket.on('chat-msg', (msg) => {saveChatMsg(msg)// 分割聊天消息，判断是否与机器人聊天const msgArr = msg.text.split(' ')if (msgArr[0] === '@小美') {getRobotMsg({userId: msg.userId, roomId: msg.roomId, text: msgArr[1]}, (robotmsg) => {saveChatMsg(robotmsg)io.to(msg.roomId).emit('chat-msg', robotmsg)})}io.to(msg.roomId).emit('chat-msg', msg)})// 机器人聊天socket.on('robot-msg', (msg) => {getRobotMsg({userId: msg.userId, text: msg.text}, (robotmsg) => {socket.emit('robot-msg', robotmsg)})})// 离开房间socket.on('leave-room', (info) => {socket.leave(info.roomId)console.log(info.nickname + '离开了房间')})

vue.js+socket.io+express+mongodb打造在线聊天[一]相关推荐

Vue全家桶+Socket.io+Express/Koa2打造网页版手机QQ
Vue全家桶+Socket.io+Express/Koa2打造的网页版手机QQ(web app),高仿手机QQ7.1.0版本.为了方便大家学习,现在IP定位接口和实时气温接口也开放了!接口请在源码中查 ...
vue.js+socket.io打造一个好玩的新闻社区
title: Socket.io+vue打造新闻社区 date: 2017-06-12 20:19:05 tags: [vue.js,javascript,socket.io] vue2.0 + so ...
使用JS+socket.io+WebRTC+nodejs+express搭建一个简易版远程视频聊天
目录 WebRTC 代码原理及流程源码:git@gitee.com:DieHunter/myCode.git仓库:myCode/videoSteam 前端先附上HTML和CSS 完整的socket ...
socket.io简单说明及在线抽奖demo
socket.io简单说明及在线抽奖demo socket.io 简介 Socket.IO可以实现实时双向的基于事件的通信. 它适用于各种平台,浏览器或设备,也同样注重可靠性和速度. socket.i ...
使用Node.js+Socket.IO搭建WebSocket实时应用
Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. 作 ...
视频教程-Node.JS - socket.io教程-Node.js
Node.JS - socket.io教程全栈开发工程师,现职于北京一家学院的全栈教学主任. 8年前端开发经验.4年移动端开发经验.4年UI设计经验.3年一线教学经验. 精通Node.JS.PHP. ...
在线白板，基于socket.io的多人在线协作工具
为什么80%的码农都做不了架构师?>>> 首发:个人博客,更新&纠错&回复是昨天这篇博文留的尾巴,socket.io库的使用练习,成品地址在这里. 代码已经上 ...
Nodejs+socket.io 搭建个人的网页聊天室
Nodejs+socket.io 搭建个人的网页聊天室最近看到别人搭建了自己的实时聊天室便产生了兴趣,于是乎自己也着手搭建了一个.在socket这里我选用了socket.io这个模块,在网上看了很多 ...
使用nettyio+socket.io搭建简单的网页聊天室
使用nettyio+socket.io搭建简单的网页聊天室 1 目录结构 2 maven 依赖配置 <project xmlns="http://maven.apache.org/PO ...

vue.js+socket.io+express+mongodb打造在线聊天[一]

vue.js+socket.io+express+mongodb打造在线聊天

在线地址观看

github地址

有喜欢的小哥哥，小姐姐请反手来个star，谢谢！有issue的欢迎提出

vue.js+socket.io+express+mongodb打造在线聊天[一]相关推荐

最新文章

热门文章