The front-end code

Enter the project to connect after no asynchronous logic processing (address fixed, do not login) main.js

import VueSocketIO from 'vue-socket.io'; connetFun(); Function connetFun(){vue.use (new VueSocketIO({// The socket initialization process will print events defined in the socket: True, / / our authentication is joining together in a query the connection according to the actual situation of your project: ` http://192.168.70.41:3009? ${query} ` options: {path: {}, / / don't automatically add/socket at path. IO / <! --{path: "/my-app/"} -->// reconnect:true, options: {autoConnect: true}})); } new Vue({ el: '#app', router, store, template: '<App />', components: { App }, });Copy the code

Main.js whose address is not fixed/after login/has parameters that need to be asynchronously obtained and then connected

Description Failed to get the socket event

connetFun();
function connetFun(){
    Vue.use(new VueSocketIO({
      debug: trueConnection: ` http://192.168.70.41:3009?${query}',// local options:{path:{}}, reconnect:true,
      options: {
          autoConnect: true}})); new Vue({ el:'#app',
    router,
    store,
    template: '<App />',
    components: { App },
    beforeCreate () {
      Vue.prototype.bus = this
    }
  });
}
 
Copy the code

Method 2: combine connect event + Store + route guard to intercept

The code is not there yetCopy the code

XXX. Vue Listening event sending instruction Listening event receiving instruction

    sockets: {
        connect: function() {
            this.$socket.emit('join');
            this.setConnectSocket(true)
            console.log('connect')
        },
        disconnect: function () {
            this.setConnectSocket(false);
            console.log('disconnect')
        },
        reconnect:function(){
            console.log('User reconnect')
        },
        error: function () {
        },
        demand: function () {
        },
        push: function () {
        },
        message:function(data) {// Listen for message changes console.log('message')
            this.setMessageInfo(data)
        },
        join:function (data) {
            this.$message({
                message: 'New user logged in! '.type: 'success'
            });
        },
        leave:function (data) {
            this.$message({
                message: 'There are users leaving! '.type: 'error'}); }},Copy the code

Send instructions

this.$socket.emit('message'.'Hahahaha');
Copy the code

The service side express

Var express = require('express')
  , path = require('path')
  , app = express()
  , server = require('http').createServer(app)
  , io = require('socket.io').listen(server); // Set the log level io.set('log level', 1); var randomNum = 1; //WebSocket connection listening IO. On ('connection'.function (socket) {
      socket.emit('open'); // Notify client of connection // Print handshake information // console.log(socket.handshake); // Construct the client object socket.on('join'.function(msg){
        // socket.emit('join');
        socket.broadcast.emit('join'); }); Socket.on ('message'.function(MSG){// return message (can be omitted) // socket.emit('message',msg); // Broadcast to send messages to other users socket.broadcast.emit('message',msg); }); socket.on('reconnect_attempt'.function(msg){ }); // Listen for the logout event socket.on('disconnect'.function () {  
    var obj = {
      time:getTime(),
      color:client.color,
      author:'System',
      text:client.name,
      type:'disconnect'}; // The broadcast user has exited socket.broadcast.emit('leave'); }); }); // Express basic configuration app.configure(function(){
  app.set('port', process.env.PORT || 3009);
  app.set('views', __dirname + '/views');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development'.function(){ app.use(express.errorHandler()); }); // Specify the webscoket client HTML file app.get('/'.function(req, res){
  res.sendfile('views/chat.html');
});

server.listen(app.get('port'), function(){
  console.log("Express server listening on port " + app.get('port'));
});

Copy the code

conclusion

When writing the reference to the blog www.cnblogs.com/dreamsqin/p… The principle is a little bit clearer and it’s a little bit easier for me to write down the idea