Of the personal blog website welcome communication: firefly: https://blog.xkongkeji.com

What is a socket. IO

Socket.IO is a Node-based JavaScript framework that encapsulates Websocket, including client JavaScript and server Node. It hides all the low-level details and makes the top-level invocation very simple. In addition, socket. IO has another very important benefit. It not only supports WebSocket, but also supports many polling mechanisms and other real-time communication methods, and encapsulates a common interface. These include Adobe Flash Socket, Ajax long polling, Ajax Multipart Streaming, persistent Iframe, JSONP polling, etc. In other words, when socket. IO detects that the current environment does not support WebSocket, it automatically selects the best way to implement real-time network communication.

Client (vue+vue-socket. IO)

The installation

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

implementation

  • Introducing the vue – socket. IO
Import VueSocketIO from 'vue-socket. IO 'vue. use(new VueSocketIO({debug: true, connection:' your address ', vuex: {}})) import VueSocketIO from 'vue-socket. IO 'vue. use(new VueSocketIO({debug: true, connection:' your address ', vuex: {}})Copy the code
  • Listen for server custom events
MSG: function (data) {console.log(data); Function (data) {console.log(data); }},Copy the code

Note: Sockets are not in the same class as methods

Problems that may be encountered link requests cross domain problems

  • Configure the proxy in vue.config.js
 proxy: {
    '/socket.io': {
     target: 'http://localhost:9000',
     ws: true,
     changeOrigin: true
    },
    '/sockjs-node': {
     target: 'http://localhost:9000',
     ws: false,
     changeOrigin: true
    },
}
Copy the code

Node server (Express +socket.io)

The installation

npm install socket.io --save
Copy the code

implementation

const app = require('express')(); const server = require('http').Server(app); const io = require('socket.io')(server, {allowEIO3: true, cors: true }); server.listen(9000); All ('*', function(req, res, next) {res.header(" access-Control-allow-origin ", "*"); res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization"); next(); }); let user = []; let userOnline = [] io.on('connection', function (socket) { socket.on('login', Function (data) {if(socket.client.id in userOnline){console.log(' you have already been there ')}else {user.push({id:socket.id, name:data.name, socket:socket }) userOnline.push({ id:socket.id, name:data.name, }) } socket.emit('online',{'user':userOnline}) socket.broadcast.emit('msg',{'user':data.name}) }); socket.on('submitmsg',(data)=>{ console.log(data) socket.broadcast.emit('msg',data) }) socket.on('disconnect',()=>{ for (let i = 0; i < userOnline.length; i++) { if(socket.id === userOnline[i].id){ userOnline.splice(i,1) } } for (let i = 0; i < user.length; I++) {if (socket. Id = = = user [I] id) {the console. The log (user [I] name + 'left') user. The splice (I, 1)}}})});Copy the code
  • Thus realized the simple communication socket