Shulou(Shulou.com)06/03 Report--

This article introduces vue, node and socket io how to achieve multi-person interaction and release online, the content is very detailed, interested friends can refer to, I hope it can be helpful to you.

I. background

1. The front end uses vue + vuex + socket.io-client

Npm install socket.io-client-save-dev

two。 The backend uses node + express + socketio

1. Build node development environment

Npm init-y

Dependency required for installation

Npm install express-save-dev

Npm install socket.io-client-save-dev

II. Overview of related uses of socket.io

1. Send event

Socket.emit ('event name', data = > {/ / data is the data to be transferred, which can be boolean, string, number, object, etc.})

two。 Monitor event

Socket.on ('event name at the time of sending', data = > {/ / data data sent by the event})

3. Broadcast event

/ / send to other users (not to themselves) socket.broadcast.emit ('event name', data = > {/ / data is the data to be transferred, which can be boolean, string, number, object, etc.}) 3. Development process

1. Create a new socket.js file at the front end to receive socket-related events, as follows

/ / introduce socket.io-clientimport io from 'socket.io-client'// to create a link const socket = io () / / listen to socket.on (' connect', () = > {console.log ('successfully connected to the server!') }) > = the middle part is used to listen for socket events sent by the backend For example: = / / enter the room socket.on ('enter_room', (data) = > {/ / necessary data can be stored in storage localStorage.setItem (' counts', JSON.stringify (data)) store.commit ('setData', JSON.parse (localStorage.getItem (' data'))}) / / the processing service loses connection socket.on ('disconnect', () = > {console.log (' disconnect')}))

two。 Backend part of the related code

Const app = require ('express') () const http = require (' http') .Server (app) var io = require ('socket.io') (http) let onlineUsers = {} let users = [] let onlineCounts = 0io.on (' connection', socket = > {/ / user enters the game socket.on ('enter') (data) = > / add user information const sid = socket.id socket.name = data.name / / add a new user if (! onlineUsers.hasOwnProperty (data.name)) {onlineUsers [data.name] = sid onlineCounts++ } if (! users.length) {users.push ({name: onlineUsers [sid]})} / / current number let clientsCount = io.sockets.server. Engine.clientsCount / / send the user list to the current user (corresponding to the enter_room code monitored by the frontend) io.emit ('enter_room') {role: data.role, users, onlineCounts}) / / send new users to other users (not to themselves) socket.broadcast.emit ('user_enter', data.name)}) / / Open the listening port at the backend By configuring the proxyTable proxy to the backend server, the front end can perform data docking between the front and back end http.listen (port, () = > {console.log ('back-end server started successfully!') }) IV. Launch

1. Front end:

1) install http-server, then link to the server. After entering the server, pull the front-end code of the remote warehouse (usually pulled from the server www directory). If the code has not been cloned, you need to configure the public key on the server before downloading.

Public key configuration

Ssh-keygen-t rsa-C "your mailbox"

After the public key is generated, enter the directory of the files generated by the public key, copy it to the code hosting platform, and add the public key to clone the code.

2) package the front-end code and generate the dist file

Npm run build

3) enter dist and execute the command to start the front end.

Pm2 start http-server-p specify port number

4) frontend access, server address + port number

two。 Backend:

1) like the frontend (no need to install http-server), pull the frontend code of the remote warehouse after entering the server (usually in the server www directory). If the code has not been cloned, you need to configure the public key on the server before downloading.

2) execute the command

Pm2 start index.js (file entry, if you have app.js as the file entry, execute app.js)-p specify the port number

Note:

When socket.io publishes online, the front end has to change the socket.io proxy address port to the back-end port, otherwise it will report 404. The modification location is as follows (here my back-end port is 3000)

2. Nginx needs to modify the proxy forwarding address of socket.io, otherwise it will also report 404.

Supplement 1.pm2 common instructions

Pm2 list / / View pm2 startup list

Pm2 stop specifies the port number / / stops the pm2 under the current port

Pm2 restart specifies the port number / / restart the pm2 of the specified port

Pm2 delete specifies the port number / / deletes the pm2 under the current window

Pm2 start http-server / index.js-p specify the port number / / start the corresponding front and back end

2. Related instructions of nginx on the command line

Cd / nginx specified directory

Cat nginx.conf / / View the contents of the nginx file

Vim nginx.conf / / Edit nginix, note that after entering, use "I" for editing mode; "u" undo previous edit; "esc" exit editing mode; "shift +:" Save and exit

About vue and node and socket io how to achieve multi-person interaction and launch to share here, I hope the above content can be of some help to you, you can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.