基于vue+vue-socket.io +express + mongodb + elementUi定义自己的聊天工具

先上成品图片

chat.PNG

技术应用以及功能介绍

1.前端框架时用vue2搭建，基于elementUI
2.vue-socket.io长连接的使用
3.用户登陆退出的实时显示
4.聊天数据的保存
3.后端使用express + mongoose来对数据进行操作，主要包括增删改查等

上面技术的使用之前的文章有写，包括vue+express的使用以及mongoose数据库的连接https://www.jianshu.com/p/f50aa818ab66：vue+express的使用
https://www.jianshu.com/p/440bb0c9d7f8 ：mongoose数据库的连接

下面介绍vue-socket.io长连接的使用

1.安装

cnpm i vue-socket.io --save
//这里安装使用可能会报错，如果报错使用vue-socket.io的`^2.1.1-a`版本安装

2.在main.js引入

import VueSocketio from 'vue-socket.io';
 Vue.use(VueSocketio,'http://localhost:3000/');
//后面的连接为后端地址，这里express启动的地址端口默认时3000

3.在server/bin/www也就是express目录文件夹下加入以下代码:

var io = require('socket.io').listen(server.listen(port));

4.定义用户表结构:models文件夹下定义chat.js

var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var chatObj = new Schema({
    groupPepole: String,
    groupTime: String
});
module.exports = mongoose.model('chats',chatObj);
// chatName: String,
// chatTime: String

5.定义内容表结构在:models文件夹下定义chatcontent.js

var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var chatconObj = new Schema({
    chatName: String,
    chatTime: String,
    chatContent: String
});
module.exports = mongoose.model('chatcontents',chatconObj);

6.基于experss的增删改查如下:在routers下定义chat.js,并在app.js下引入
var chatRouter = require('./routes/chat');
app.use('/chat', chatRouter);
chat.js代码如下：

var express = require('express');
var Router = express.Router();
var chatModel = require('../models/chat');
var chatConModel = require('../models/chatcontent');
// 保存登陆用户
Router.post('/pepole',function(req,res,next){
      let newDate = new Date();
      let pepoleList = new chatModel({
         groupPepole: req.body.loginName,
         groupTime:  newDate.toLocaleDateString() + ' ' + newDate.toLocaleTimeString()
      });
      pepoleList.save(function(err,doc){
        if(err) {
            res.json({
                states: 0,
                msg: err.message
            });
        }else {
            res.json({
                states: 1,
                msg: '保存成功'
            });
        }
      });  
// 保存用户发布内容
Router.post('/content',function(req,res,next){
    let newDate = new Date();
    let conList = new chatConModel({
        chatName: req.body.chatName,
        chatContent: req.body.chatContent,
        chatTime: newDate.toLocaleDateString() + ' ' + newDate.toLocaleTimeString()
    });
    conList.save(function(err,doc){
      if(err) {
          res.json({
              states: 0,
              msg: err.message
          });
      }else {
          res.json({
              states: 1,
              msg: '保存成功'
          });
      }
    });  
});
//获取内容并返回
Router.post('/geContentList',function(req,res,next){
    chatConModel.find({}, function(err,doc){
      if(err) {
          res.json({
              states: 0,
              msg: err.message
          });
      }else {
          res.json({
              states: 1,
              msg: doc,
              count:doc.length
          });
      }
    });  
});
//获取用户列表
Router.post('/getUserList',function(req,res,next){
    chatModel.find({}, function(err,doc){
      if(err) {
          res.json({
              states: 0,
              msg: err.message
          });
      }else {
          res.json({
              states: 1,
              msg: doc,
              count:doc.length
          });
      }
    });  
});
//退出登陆
Router.post('/out',function(req,res,next){
    let conditions = {
        groupPepole: req.body.loginName
    }
    chatModel.remove(conditions, function (err,doc) {
        if(err) {
            res.json({
                states: 0,
                msg: err.message
            });
        }else {
            res.json({
                states: 1,
                msg: 'doc'
            });
        }
    });
});
module.exports = Router;

下面时长连接的使用

1.在server/bin/www下加入以下代码：

io.sockets.on('connection', (socket) => {
    console.log('链接成功了呀'); 
    //监听新用户加入
     socket.on('login', function(obj){
        //向所有客户端广播用户加入
        io.emit('login', obj);
        // console.log(obj.username+'加入了聊天室');
  });
  socket.on('out', function(obj){
        //向所有客户端广播用户加入
        io.emit('out', obj);
        // console.log(obj.username+'加入了聊天室');
  });
  socket.on('content', function(obj){
        //向所有客户端广播用户加入
        io.emit('content', obj);
        // console.log(obj.username+'加入了聊天室');
    });
});

在前端使用如下：

// 长连接
        sockets: {
            //不能改,j建立连接自动调用connect
            connect: function() {
                //与socket.io连接后回调
                console.log("socket connected");
            },
            //服务端向客户端发送login事件
            login: function(value) {
                //监听login(后端向前端emit  login的回调)
                this.userList.push(value);
                console.log(value, 'valuevaluevaluevaluevaluevalue')
            },
            out: function(value) {
                //监听out(后端向前端emit  out的回调)
                this.userList.push(value);
                console.log(value, 'valuevaluevaluevaluevaluevalue')
            },
            content: function(value) {
                //监听out(后端向前端emit  out的回调)
                this.contentList.push(value);
                console.log(value, 'valuevaluevaluevaluevaluevalue')
            }
        },

前端具体页面如下

这个就时实现简单的聊天工具，git地址如下https://github.com/a1218331130/vueBlog