In many required services, real-time communication between the browser and the server is required to achieve functions, such as: scanning code login (after scanning, the mobile phone confirms the login, PC web page login and jump), order language reminder, etc., which are built on the basis of real-time communication at both ends. For the front-end, to achieve real-time communication between the browser and the server, the best choice is the socket. IO library, can quickly achieve real-time communication between the two ends of the function.

1, What is socket. IO?

Socket.IO is a WebSocket library that enables real-time, bidirectional and event-based communication between the browser and the server. It includes: Node.js server library, browser Javascript client library. It will automatically according to the browser from WebSocket, AJAX long polling, Iframe stream and so on a variety of ways to choose the best way to achieve real-time network applications, very convenient and user-friendly, and support the browser as low as IE5.5

2. Main features of socket. IO

(1) Support browser /Nodejs environment (2) support two-way communication (3) API simple and easy to use (4) support binary transmission (5) reduce the amount of data transmission

3. The use of socket. IO in vue. js

(1) Client

npm install vue-socket.io --save  
Copy the code

Main.js adds the following code

import VueSocketIO from 'vue-socket.io'
 
Vue.use(new VueSocketIO({
    debug: true.// Server address
    connection: 'http://localhost:3000'.vuex: {}}))Copy the code

Send messages and listen for messages

// Send information to the server
this.$socket.emit('login', {username: 'username'.password: 'password'
});

// Receive information from the server
this.sockets.subscribe('relogin', (data) => {
  console.log(data)
})
Copy the code

(2) Server

On the server side, we build the Node server based on Express.

npm install --save express
npm install --save socket.io
Copy the code

Index. Js file

var app = require('express') ();var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/'.function(req, res){
  res.send('
 Hello Web show 
');
});
 
io.on('connection'.function(socket) {
  // Receive data
  socket.on('login'.function (obj) {                
      console.log(obj.username);
      // Send data
      socket.emit('relogin', {
        msg: Hi `${obj.username}`.code: 200
      });  
  });
});
 
http.listen(3000.function(){
  console.log('listening on *:3000');
});
Copy the code

Then start the server service

node index.js
Copy the code

The client can view the effect.

Socket.IO events

io.on('connect', onConnect);

function onConnect(socket){

  // Send to the current client
  socket.emit(
    'hello'.'can you hear me? '.1.2.'abc'
  );

  // To all clients except the sender
  socket.broadcast.emit(
    'broadcast'.'hello friends! '
  );

  // to all clients in the same 'game' room except the sender
  socket.to('game').emit(
    'nice game'."let's play a game"
  );

  // To all clients in the same room as 'game1' or 'game2', except the sender
  socket.to('game1').to('game2').emit(
    'nice game'."let's play a game (too)"
  );

  // to all clients in the same 'game' room, including the sender
  io.in('game').emit(
    'big-announcement'.'the game will start soon'
  );

  // to all clients in the same 'myNamespace' namespace, including the sender
  io.of('myNamespace').emit(
    'bigger-announcement'.'the tournament will start soon'
  );

  // Send to socketid client (private message)
  socket.to(<socketid>).emit( 'hey', 'I just met you' ); Emit ('question', 'do you think so? ', function (answer) {} ); Socket.press (false).emit('uncompressed', "that's rough"); // if the client cannot receive the message, the message maybe lost socket.volatile. Emit ('maybe', 'do you really need it? '); // Send IO. Local. Emit ('hi', 'my Lovely Babies') to all clients under the current Node instance (if multiple Node instances are used); };Copy the code

IO family bucket

Original address: www.javanx.cn