WebSocket( Simple experience version )

brief introduction

Web Socket( Socket )： It is through A long-term connection Implementation and server full duplex 、 two-way Communication for .

Web Socket It's not that HTTP The protocol is customized Web Socket agreement , So if we use Web Socket When ,URL No more http:// or https://, It is ws:// or wss://( however , Actually, I just want to play after reading the Red Treasure book , I haven't tried to use this in development )

The main features ： The server can actively push information to the client , The client can also send information to the server .

Use

Instantiation

To create a new Web Socket, First you need to instantiate a WebSocket object .

We instantiate WebSocket Object time , The parameter passed should be an absolute URL, The homology strategy does not apply to WebSocket

const socket = new WebSocket("ws://localhost:8088/mysocket");

image-20220529170446392

http The request will have cross domain , however WebSocket No cross domain

Back end express

The main parts are annotated ( Need to install express-ws)

const express = require('express')
const expressWs = require('express-ws')

const app = express()

//  take WebSocket Services added to app in , To put it simply, let app Added ws Method 
expressWs(app)

//  establish WebSocket service 
app.ws('/mysocket', function (ws) {
  // ws： establish WebSocket Example 
    
  //  Send messages to clients 
  ws.send(' You are connected successfully ')
})

app.listen(8088, () => {
  console.log('ws://localhost:8088')
})

image-20220529172415750

If it's connected , that http The status code will be 101, Because I want to switch to ws agreement

The binding event

If we , Start sending messages after instantiation , That will cause the message not to be sent out , Because it's not connected yet . At this time, we have to find out when we can send , Then we have to understand WebSocket Related events .

• open： Triggered when the connection is successfully established
• error： Triggered when a connection error occurs ( You can no longer send messages )
• close： Trigger... When the connection is closed ( You can no longer send messages )
• message： Trigger when you receive a message ( The received message is in the event object data in )

const socket = new WebSocket("ws://localhost:8088/mysocket");
socket.onopen = function () {
    console.log(" Connection is established ");
    socket.send('hello');
    // socket.close()
};
socket.onerror = function () {
    console.log(" Connection error ");
};
socket.onclose = function () {
    console.log(" Connection is closed ");
};

socket.onmessage = function (e) {
    console.log(e)
}

image-20220529173743731

image-20220529174046932

Simulate a conversation between two people

It's already said , Receiving a message triggers message event , So we can message In the event, the corresponding information is sent according to the received information .

client ：

const socket = new WebSocket("ws://localhost:8088/mysocket");
socket.onopen = function () {
    console.log(" Connection is established ");
    socket.send('hello');
    // socket.close()
};
socket.onerror = function () {
    console.log(" Connection error ");
};
socket.onclose = function () {
    console.log(" Connection is closed ");
};

socket.onmessage = function ({ data }) {
    if (data.includes(' Hello ')) {
        socket.send(' bye , Server side ddd')
    } else if (data.includes(' bye ')) {
        //  call close() Method shut down WebSocket Connect 
        socket.close()
    } else {
        socket.send(' Hello , I'm the client ccc')
    }
}

The server ：

const express = require('express')
const expressWs = require('express-ws')

const app = express()

//  take WebSocket Services added to app in , To put it simply, let app Added ws Method 
expressWs(app)

//  establish WebSocket service 
app.ws('/mysocket', function (ws) {
  // ws： establish WebSocket Example 
  ws.send(' You are connected successfully ')

  ws.onmessage = function ({ data }) {
    if (data.includes(' Hello ')) {
      ws.send(' Hello , I'm the server ddd')
    } else if (data.includes(' bye ')) {
      ws.send(' bye , client ccc')
    }
  }
})

app.listen(8088, () => {
  console.log('ws://localhost:8088')
})

image-20220529175742257

Be careful ： If the receiving and sending part processes , You need to pay attention to , If it's not handled properly , There may be a circulation jam .

such as , Server and client message Event callbacks are ：

socket.onmessage = function ({ data }) {
    socket.send('hello')
}

image-20220529180303794