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