Project introduction

WebSocket is a popular way of data interaction. After learning WebSocket, I plan to use VUE + WebSocket + mysql to complete a small mobile chat room, and simply realize login, registration, sending messages and other operations. Solidify your mastery of Vue and nodeJs.

The project address

The project adopted:

  • Vux: Mobile UI framework
  • Vue-router Manages routes
  • Socket. IO Creates the Websocket service
  • MySQL user data management
  • Vue-cli 3.0 Create a project

Start the project

Start the server

npm run serve
Copy the code

Start the client

npm run dev
Copy the code

Project screenshots

Login screen

The chat room

The following is my summary of the project

The client

Vux was introduced in VUe-CLI 3.0

Vux does not support the introduction of VUX-CLI 3.0. You need to modify the configuration.

The solution is to create a vue.config.js file in the project directory and add the project configuration:

const vuxLoader = require("vux-loader")
module.exports = {
  configureWebpack: config= > {
    vuxLoader.merge(config, {
      plugins: ["vux-ui"]}); }};Copy the code

After running the project, vue-loader may fail to parse the file. In this case, you need to install vue-loader 14.2.2 to solve the problem:

npm install vue-loader@14.22. -D
Copy the code

Then re-run the project

Vue-router Indicates the route transmission parameter

Vue-router passes parameters in two ways:

  1. Use programmatic navigationrouter.push
  2. Use declarative navigation<router-link>

Programmatic navigation

Programmatic navigation can pass parameters as strings or objects.

A string is a string jump using a route address. It is simple but cannot pass parameters.

this.$router.push("/");
Copy the code

Object can be used to pass parameters. Receive name(named route) and params(pass parameter). Name is the name of the path specified during route definition.

this.$router.push({ name: "index".params: { username: 'xxx' }})
Copy the code

Receive the passed parameters on another page

this.$route.params.username;
Copy the code

Note: name is paired with params; Path is paired with Query. Using Query, data is not lost when the page is refreshed.

Declarative navigation

Declarative navigation passes parameters similarly.

Using strings

<router-link to="/">Copy the code

Using the object

<router-link to="{name: 'index', params: {username: 'XXX'}}">Copy the code

The service side

Use socket. IO

Create a socket in server.js to listen for client connections and two-way communication.

const http = require("http");
const io = require("socket.io");
// Create an HTTP server
let httpServer = http.createServer();
httpServer.listen(8080);
/ / create a socket
let ws = io.listen(httpServer);
// The server listens for client connections
ws.on("connection", sock => {
  // Process the operation
  // ...
  // Receive the message sent by the client
  sock.on('xx', () = > {});// The server sends messages to the client
  sock.emit('xx', data);
}
Copy the code

In client index.html

<! -- Introduce client script -->
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
<! Create a connection -->
<script>
  const socket = io.connect('ws://localhost:8080/');
  // The client sends messages to the server
  socket.emit('xx', data);
  // The client receives the server message
  socket.on('xx', () = > {});</script>
Copy the code

MySQL operation

Database structure

  • idPrimary key, increment
  • usernameThe user name
  • passwordpassword
  • onlineIndicates whether the number of online users can be counted

Introducing the mysql module

const mysql = require("mysql");
// Connect to the database
let db = mysql.createPool({
  host: "localhost".user: "test".password: "test".database: "websocket"
});

// Database operation
db.query('Database operation statement', (err, data) => {
  // The callback function
  // Err indicates an error message about an execution failure
  // data Indicates the data returned after successful execution
})
Copy the code