vue + mongoose + node.js project summary socket.io use plug-ins for online chat function (prepare papers) in the framework of Title VI _express

I. Introduction                                                                             

1, recently separated before and after the development stage when the project uses socket.io achieve an online chat feature, text records about the attention point in the project.

                          1, Node to build part of the background

                                  Section I: socket.io server connection port                                    

                                  Section II: defining a service end of the operating socket.io method, and monitor front end-user chat log

                            2, vue.js reception section

Second, the main knowledge                                                                      

1, Node to build part of the background.

 Section I: socket.io server connection port

     (1) Download and install the plug-socket.io      

npm i --save socket.io

 

        (2) using the following framework express single operation node will socket.io widget to a method of packaging a folder.

        Socket.io connected in the bin

         

 

 

 

        (3) The first step: to monitor the server using socket.io

GetSocketio encapsulated in socketio.js server listens for the method:

var socketio = {}
var socket_io = require('socket.io')

//获取io
socketio.getSocketio = function(server){
   var io = socket_io.listen(server)

   io.sockets.on('connection', socket=>{
       console.log('连接成功')
       const socketId = socket.id
  }

}

 

In bin / www folder download monitor server just defined in and call the method

 

 

A second end defining a service socket.io operation method, and user chat log monitor front end

       (1) Create a new socketId object will be randomly assigned a unique socketid for each user when the user logs in.

 

Express the require = the let ( 'Express' ); 

the let Mongoose = the require ( 'Mongoose' ); 

module.exports = new new mongoose.Schema ({ 
    socketid: String, // randomly assigned socketid 
    username: String   // login user name 
});

 

          

         (2) in the folder below socketid a packaging method for a user to save socketId

= Idtoid the require the let ( '../Models/Idtoid' ) 

module.exports = class SocketHandler {
     static the async savaUserSocketId (username, socketID) {
         // save the user id and socketid 
        the await Idtoid.findOne ({ 
            username: username 
        }). the then ((RS) => {
             IF ! (RS) { // if the current user is not present on the new a 
                new new Idtoid ({ 
                    username: username, 
                    socketid: socketID 
                .}) Save () the then ((). => { 

                } ) 
            } the else {
                Idtoid.update({
                    username: username
                }, {
                    socketid: socketId
                }).then(()=>{

                })
            }
        })
    }
}

 

         (3) implement logic monitor login and monitor chat

/ * 
Package socket.io, in order to obtain the server listening 
* / 
the let Idtoid = the require ( '../Models/Idtoid' ) 
the let SocketHandler = the require ( './socketioHander.js' ); // Socket BE ACHIEVED logic 
var SocketIO = {}
 var socket_io the require = ( 'Socket.IO' ) 

// Get IO 
socketio.getSocketio = function (Server) {
    var IO = socket_io.listen (Server) 

   io.sockets.on ( 'Connection' , Socket => { 
       the console.log ( 'successful connection' ) 
       const socketID =socket.id 

       // monitor user login, assigned to a each login user socketid 
       socket.on ( 'Login' , (username) => { 
           the console.log ( 'a user logs' )
                // call save method socketid 
           socketHandler. savaUserSocketId (username, socketID) 
       }) 

       // monitor user chat, data is transmitted from front end data 
       socket.on ( 'chat' , (data) => { 
           the console.log ( 'users initiate a chat friends' ) 

      the console.log (Data) 
        Idtoid.findOne ({ 
            username: data.to_user 
        }). the then ((RS) => {
           // a message corresponding to the person
            io.to(rs.socketid).emit('receiveMsg', {
                from_user: data.from_user,
                message: data.message,
                time: data.time,
                avater:data.avater,
                _id:data._id
            })
        })
       })
   })
}

module.exports = socketio

 

 

 

 

 

2, vue.js reception section

          (1) incorporated in the index.html file and using

 

 

(2) user logon trigger

 

 

(3) triggered whisper