node+uniapp+socket simple chat

Table of contents

1. Technical introduction

1.1. Client

1.2. Server

2. Code analysis

2.1. Front-end connects to back-end

2.2. The front end sends, the back end receives and broadcasts back

3. Effect display

4. Upgraded version

1. Technical introduction

1.1. Client

The uni-app project is created by itself. Weapp.socket.io requires the backend to download cnpm i weapp.socket.io , copy /weapp.socket.io/lib/ weapp.socket.io.js to the front-end project, and place it in the public file Just clip it off!

1.2. Server

Build the express framework npm install express --save and create the project;

cnpm i socket.io@2 --save When installing the backend, ensure that the front-end and back-end versions are consistent, otherwise messages cannot be received.

1.3. Principles of broadcasting

 

2. Code analysis

2.1. Front-end connects to back-end

2.2. The front end sends, the back end receives and broadcasts back

The front-end code is written in the index.vue page of the page, and the back-end is the self-built index.js file. When running, node index.js .

3. Effect display

 

4. Upgraded version

To be determined...