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. c#多线程同步之EventWaitHandle的应用

    最近在研究前辈写的winform代码,其中有一个功能,前辈用了EventWaitHandle.初读代码,有点不理解,慢慢想来,还是可以理解的.这个功能,就是执行某项比较耗时的任务,需要打开旋转图标,等 ...

  2. Java遍历二叉树深度宽度

    节点数据结构 class TreeNode { TreeNode left = null; TreeNode right = null; } 最大深度,基本思路是:使用递归,分别求出左子树的深度.右子 ...

  3. 毫秒级检测!你见过带GPU的树莓派吗?

    树莓派3B+英特尔神经计算棒进行高速目标检测 转载请注明作者梦里茶 代码: 训练数据预处理: https://gist.github.com/ahangchen/ae1b7562c1f93fdad1d ...

  4. 九度OJ题目1105:字符串的反码

    tips:scanf,cin输入字符串遇到空格就停止,所以想输入一行字符并保留最后的"\0"还是用gets()函数比较好,九度OJ真操蛋,true?没有这个关键字,还是用1吧,还是 ...

  5. 原生jdbc操作mysql数据库详解

    首先给大家说一下使用JDBC链接数据库的步骤 1.加载链接数据库驱动 2.建立数据库链接 3.创建数据库操作对象 4.编写sql语句,执行sql语句 5.获取结果集 6.释放资源 我这边采用的是mav ...

  6. jQuery中的ajax的相关方法

    JQuery对Ajax操作进行了封装,$.ajax()方法属于最底层的方法,第2层是load().$.get().$.post()方法,第3层是$.getScript()和$.getJSON()方法. ...

  7. Zookeeper技术分享

    内容整理自组内分享PPT 一.概述 ZooKeeper 遵循一个简单的客户端-服务器模型,其中客户端 是使用服务的节点(即机器),而服务器 是提供服务的节点.ZooKeeper 服务器的集合形成了一个 ...

  8. Java大世界

    "java越来越过份了." php狠狠的说,他转头看着C:"C哥,您可是前辈,java最近砸了我不少场子,你老再不出来管管,我怕他眼里就没有您了啊." C哥吸烟 ...

  9. 强大核心功能矩阵,详解腾讯云负载均衡CLB高可靠高性能背后架构

    1 前言 腾讯云负载均衡(Cloud LoadBalancer),简称CLB, 负载均衡通过设置虚拟服务地址(VIP)将来自客户端的请求按照指定方式分发到其关联的多台后端云服务器,服务器将请求的响应返 ...

  10. 可视化:svg相关基础

    01.svg的嵌入.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...