Hello, everyone! I’m the head Up. A front end siege lion with code cleanliness (ha ha, life is messy (*￣))

I’m sure you’re rightWebsocketWill not be unfamiliar, familiar to all know a little, today xiaobian and everyone to learnWebsocket. Build a simple chat project, welcome big guy criticism

Websocket is introduced

Introduction to the

WebSocket is a protocol for full-duplex communication over a single TCP connection. It was born in 2008 and made standard in 2011. WebSocket makes it easier to exchange data between the client and the server, allowing the server to proactively push data to the client. In the WebSocket API, a handshake between the browser and the server is all that is needed to create a persistent connection and two-way data transfer.

Its biggest feature is that the server can take the initiative to push information to the client, the client can also take the initiative to send information to the server, is a real two-way equal dialogue, belongs to a server push technology.

Diagram of Websocket and HTTP

Why the Websocket protocol

For example, if we want to know about today’s stocks, the only way we can do this is if the client sends a request to the server and the server returns the query result. The HTTP protocol does not enable the server to proactively push information to the client. The one-way nature of the request makes it difficult for the client to know if the server has continuous state changes.

We can only use “polling” : every once in a while, a query is sent out to see if the server has any new information. The most typical scenario is a chat room. Polling is inefficient and a waste of resources (because you have to keep connections open, or HTTP connections open). WebSocket was born.

Scene display:

  • Buddy: Cut the crap! The number!
  • I: Coming Up, coming Up!
  • Friend: Good article!
  • O(∩_∩)O haha ~

Build FE

The front end is based on vue/ CLI, and Vant uses booTCDN socketJS file

Link to the background and log in

Binding on

Binding to exit

Receive a message

Send a message

To build a BE

The backend is built using Express, socket. IO

The user login

User exit

Broadcast chat

conclusion

Here is the end, some too simple, to a few project renderings, send the code plane tickets

If it helps your friends, click “like” before you go