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

在线地址观看

http://www.chenleiming.com

github地址

https://github.com/ClmPisces/...

有喜欢的小哥哥,小姐姐请反手来个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)
    })
  })

vue.js+socket.io+express+mongodb打造在线聊天的更多相关文章

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

    vue.js+socket.io+express+mongodb打造在线聊天[二] 在线地址观看 http://www.chenleiming.com github地址 https://github. ...

  2. 使用node.js + socket.io + redis实现基本的聊天室场景

    在这篇文章Redis数据库及其基本操作中介绍了Redis及redis-cli的基本操作. 其中的publish-subscribe机制应用比较广泛, 那么接下来使用nodejs来实现该机制. 本文是对 ...

  3. socket.io简单说明及在线抽奖demo

    socket.io简单说明及在线抽奖demo socket.io 简介 Socket.IO可以实现实时双向的基于事件的通信. 它适用于各种平台,浏览器或设备,也同样注重可靠性和速度. socket.i ...

  4. 使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  5. (转)使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  6. 使用Node.js+Socket.IO搭建WebSocket实时应用【转载】

    原文:http://www.jianshu.com/p/d9b1273a93fd Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新 ...

  7. 在线白板,基于socket.io的多人在线协作工具

    首发:个人博客,更新&纠错&回复 是昨天这篇博文留的尾巴,socket.io库的使用练习,成品地址在这里. 代码已经上传到github,传送门.可以开俩浏览器看效果. 现实意义是俩人在 ...

  8. 转载:node.js socket.io

    本文转自:http://www.xiaocai.name/post/cf1f9_7b6507  学习node.js socket.io 使用 用node.js(socket.io)实现数据实时推送 在 ...

  9. 我的学习笔记之node----node.js+socket.io实时聊天(1) (谨此纪念博客开篇)

    本想着从hello word开篇,也确实写了相关学习笔记.各种原因吧,现在又着急写出作品,便作罢. 这里将记录一个node.js+socket.io的实时聊天程序.(当然我也是跟着网上各种教程资料学习 ...

随机推荐

  1. 如何解决Reporting Services目录数据库文件存在的问题

    打开MSSQL数据库管理系统的安装目录,例如:C:\Program Files\Microsoft SQL Server\MSSQL10_50.MSSQLSERVER\MSSQL\DATA,C:\是你 ...

  2. Solidity调试 - 实现变量打印

    Solidity没有print或console.log方法可以用来打印变量,这会给我们调试程序增加难度. Solidity有event功能,可以在event中记录变量信息,通过调用event方法也可以 ...

  3. [转]SVN使用log,list,cat,diff查看所有及特定文件版本信息

    [转]SVN使用log,list,cat,diff查看所有及特定文件版本信息 http://onefishum.blog.163.com/blog/static/5184730520113153402 ...

  4. Linux上部署SVN

    Linux上部署SVN author:headsen chen  2017-10-16  16:45:04 前提:通过yum来安装,必须是centos6.5的桌面版的.否则会出现某些的安装包不全而导致 ...

  5. 浅析C#之委托、Action、Func

    一.委托 1.1 委托的定义 delegate(委托)是一种可用于封装命名方法或匿名方法的引用类型, 委托类似于 C++ 中的函数指针: .Net通过委托来提供回调函数机制. 声明一个委托类型 int ...

  6. HyperLedger Fabric 1.1 手动部署单机单节点

    手动部署单机单节点 之前发布过官方的e2e部署方案,由于环境或是访问权限等各种问题,还是有相当一部分码友无法成功跑起来,故此,本章将来一次纯手动操作的集群部署. 主要需要的步骤如下: 1:环境整理 2 ...

  7. Bootatrap常用样式

    1. 使div固定定位在页面的底部: // 当然, 需要加上自己的样式稍加修饰<div class="navbar navbar-fixed-bottom mobile-view-bo ...

  8. 笔记:Spring Cloud Eureka 高可用注册中心

    在微服务架构这样的分布式环境中,我们需要充分考虑发生故障的情况,所以在生产环境中必须对各个组件进行高可用部署,对与微服务和服务注册中心都需要高可用部署,Eureka 高可用实际上就是将自己作为服务向其 ...

  9. MSIL实用指南-生成构造函数

    本篇讲解生成构造函数的一些知识,包括创建实例构造函数.静态构造函数.调用父类构造函数. 生成构造函数的方法生成构造函数的方法是TypeBuilder.DefineConstructor(MethodA ...

  10. C语言描述栈的实现及操作(链表实现)

    #include<stdio.h> #include<malloc.h> #include<stdlib.h> typedef int Elementtype; / ...