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

This article focuses on "how to use WebSocket network communication protocol to develop chat rooms". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use WebSocket network communication protocol to develop chat rooms.

Learn about WebSocket

To develop chat rooms, we need to use WebSocket, the network communication protocol, so why do we use it?

First of all, let's quote an article by Boss Ruan Yifeng:

People who come into contact with WebSocket for the first time will ask the same question: we already have an HTTP agreement, why do we need another protocol? What benefits can it bring?

The answer is simple because there is a flaw in the HTTP protocol: communication can only be initiated by the client.

For example, if we want to know the weather today, only the client makes a request to the server and the server returns the query result. The HTTP protocol does not allow the server to actively push information to the client.

The characteristic of this one-way request makes it very troublesome 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 issued to see if there is any new information on the server. The most typical scene is a chat room.

Polling is inefficient and a waste of resources (because you have to connect constantly, or HTTP connections are always open). As a result, engineers have been wondering if there is a better way. That's how WebSocket was invented.

Let's use the official introduction on the MDN website to sum up:

WebSockets is an advanced technology. It can open an interactive communication session between the user's browser and the server. With this API, you can send messages to the server and receive event-driven responses without polling the server for responses.

The WebSocket agreement was born in 2008 and became an international standard in 2011.

Characteristics of WebSocket

The server can actively push information to the client, and the client can also actively send information to the server, which is a real two-way equal dialogue, which is a kind of server push technology.

Based on the TCP protocol, the server-side implementation is relatively easy.

It has good compatibility with HTTP protocol. The default ports are also 80,443, and the handshake phase uses the HTTP protocol, so the handshake is not easily shielded and can be passed through a variety of HTTP proxy servers.

The data format is lightweight, the performance overhead is small, and the communication is efficient.

You can send text or binary data.

There is no homologous restriction, and the client can communicate with any server.

The protocol identifier is ws (or wss if encrypted), that is, ws corresponds to http,wss and corresponds to https. The URL of the server is URL. That is, ws://www.xx.com or wss://www.xx.com

Common API for WebSocket client

The WebSocket object provides an API for creating and managing WebSocket connections, and for sending and receiving data over that connection.

Use the WebSocket () constructor to construct a WebSocket.

Attribute

1.WebSocket.onopen

Used to specify the callback function after a successful connection.

2.WebSocket.onmessage

Used to specify a callback function when information is received from the server.

3.WebSocket.onclose

Used to specify the callback function after the connection is closed.

4.WebSocket.onerror

Used to specify the callback function after a failed connection.

Method

1.WebSocket.close ()

Close the current link.

2.WebSocket.send (data)

The client sends data to the server and queues the data to be transmitted.

Client example

/ / Create WebSocket connection. Const socket = new WebSocket ('ws://localhost:8080'); / / the address here is the server's websocket service address / / Connection opened socket.onopen = function (evt) {console.log ("Connection open..."); ws.send ("Hello WebSockets!");}; / / Listen for messages socket.onmessage = function (evt) {console.log ("Received Message:" + evt.data); socket.close ();} / Connection closed socket.onclose = function (evt) {console.log ("Connection closed.");}

Commonly used WebSocket server

Here we use Node.js on the server side, and here we introduce several commonly used libraries.

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Ws

Socket.io

Nodejs-websocket

Specific usage, you can browse the Internet to browse detailed documents, here will not be introduced one by one. But in this article. I will give you the use of ws and nodejs-websocket these two modules for project development.

The client and the server are all introduced! Let's get a move on!

Develop local-side (or local area network) chat rooms (the first)

We will develop chat rooms based on Vue.js@3.0 because we embrace new technologies. How to build vue scaffolding, here will not be introduced, presumably everyone will also. Let's just go to the code.

Client

Number of people online: {{count}}

{{item.txt}}

{{item.name.substring (item.name.length-5, item.name.length)}}

{{item.name.substring (item.name.length-5, item.name.length)}}

{{item.txt}}

Send

Import {onMounted, onUnmounted, ref, reactive, nextTick} from "vue"; export default {name: "Home", setup () {let socket = null; const path = "ws://localhost:3000/"; / / Local server address const textValue = ref (""); const chatBox = ref (null); const texta = ref (null); const count = ref (0); const name = new Date (). GetTime (). ToString () Const bg = randomRgb (); const chatArr = reactive ([]); function init () {if (typeof WebSocket = "undefined") {alert ("your browser does not support socket");} else {socket = new WebSocket (path); socket.onopen = open; socket.onerror = error; socket.onclose = closed; socket.onmessage = getMessage _ window.onbeforeunload = function (e) {e = e | | window.event; if (e) {e.returnValue = "close prompt"; socket.close ();} socket.close (); return "close prompt";} } function open () {alert ("socket connection succeeded");} function error () {alert ("connection error");} function closed () {alert ("socket shutdown") } async function getMessage (msg) {if (typeof JSON.parse (msg.data) = "number") {console.log (JSON.parse (msg.data)); count.value = msg.data;} else {const obj = JSON.parse (msg.data); chatArr.push (obj);} await nextTick (); chatBox.value.scrollTop = chatBox.value.scrollHeight } function randomRgb () {let R = Math.floor (Math.random () * 130,110); let G = Math.floor (Math.random () * 130,110); let B = Math.floor (Math.random () * 130,110); return "rgb (" + R + "," + G + "," + B + ")" } function send () {if (textValue.value.trim (). Length > 0) {const obj = {name: name, txt: textValue.value, bg: bg,}; socket.send (JSON.stringify (obj)); textValue.value = ""; texta.value.focus () }} function close () {alert ("socket has been closed");} onMounted (() = > {init ();}); onUnmounted (() = > {socket.onclose = close;}) Return {send, textValue, chatArr, name, bg, chatBox, texta, randomRgb, count,;},}

As for the style file, I will also post it here.

Html,body {background-color: # e8e8e8; user-select: none;}::-webkit-scrollbar {width: 8px; height: 8px; display: none;}::-webkit-scrollbar-thumb {background-color: # D1D1D1; border-radius: 3px;-webkit-border-radius: 3px; border-left: 2px solid transparent; border-top: 2px solid transparent;} * {margin: 0; padding: 0;} .mine {justify-content: flex-end } .other {justify-content: flex-start;} .mineBg {background: # 98e165;} .otherBg {background: # fff;} .home {position: fixed; top: 0; left: 50%; transform: translateX (- 50%); width: 100%; height: 100%; min-width: 360px; min-height: 430px; box-shadow: 00 24px 0 rgb (197080 / 25);} .count {height: 5% Display: flex; justify-content: center; align-items: center; background: # EEEAE8; font-size: 16px;} .content {width: 100%; height: 80%; background-color: # f4f4f4; overflow: hidden;} .footer {position: fixed; bottom: 0; width: 100%; height: 15%; background-color: # fff;} .footer textarea {width: 100%; height: 50%; background: # fff Border: 0; box-sizing: border-box; resize: none; outline: none; padding: 10px; font-size: 16px;} .send-box {display: flex; height: 40%; justify-content: flex-end; align-items: center;} .send {margin-right: 20px; cursor: pointer; border-radius: 3px; background: # f5f5f5; z-index: 21; font-size: 16px; padding: 8px 20px } .send: hover {filter: brightness (110%);} .active {background: # 98e165; color: # fff;}. Chat-box {height: 100%; padding:0 20px; overflow-y: auto;} .chat-msg {display: flex; align-items: center;} .user {font-weight: bold; color: # fff; position: relative; word-wrap: break-word Box-shadow: 0 2px 12px 0 rgba (0,0,0,0.1); width: 60px; height: 60px; line-height: 60px; border-radius:8px; text-align: center;} .msg {margin: 05px; max-width: 74%; white-space: normal; word-break: break-all; color: # 333; border-radius:8px; padding: 10px; text-align: justify; font-size: 16px Box-shadow: 0px 0px 10px # f4f4f4;}. Chat-item {margin: 20px 0; animation: up-down 1s both;} @ keyframes up-down {0% {opacity: 0; transform: translate3d (0, 20px, 0);} 100% {opacity: 1; transform: none;}}

Server side

Node.js is used here.

Nodejs modules for nodejs-websocket:websocket servers and clients.

Const ws = require ("nodejs-websocket"); const server = ws.createServer ((conn) = > {conn.on ("text", (str) = > {broadcast (str);}); conn.on ("error", (err) = > {console.log (err);}); server.listen (3000, function () {console.log ("open");}) / / function broadcast (data) {server.connections.forEach ((conn) = > {conn.sendText (data);});}

Project list

The number of people online is zero, which is not bug, because it was not done on the local side at that time, but just put on this section. However, I have already put this feature on the cloud server. Well, let's take a look.

Develop cloud chat rooms (second)

Client ‍

Number of people online: {{count}}

{{item.txt}}

{{item.name.substring (item.name.length-5, item.name.length)}}

{{item.name.substring (item.name.length-5, item.name.length)}}

{{item.txt}}

Send

Import {onMounted, onUnmounted, ref, reactive, nextTick} from "vue"; export default {name: "Home", setup () {let socket = null; const path = "wss:/xxx.com/wsline/"; / / this URL is only a test URL. It only indicates the cloud service address const textValue = ref (""); const chatBox = ref (null); const texta = ref (null); const count = ref (0). Const name = new Date (). GetTime (). ToString (); const bg = randomRgb (); const chatArr = reactive ([]); function init () {if (typeof WebSocket = "undefined") {alert ("your browser does not support socket");} else {socket = new WebSocket (path); socket.onopen = open; socket.onerror = error; socket.onclose = closed Socket.onmessage = getMessage; _ window.onbeforeunload = function (e) {e = e | window.event; if (e) {e.returnValue = "close prompt"; socket.close ();} socket.close (); return "close prompt";} } function open () {alert ("socket connection succeeded");} function error () {alert ("connection error");} function closed () {alert ("socket shutdown") } async function getMessage (msg) {if (typeof JSON.parse (msg.data) = "number") {console.log (JSON.parse (msg.data)); count.value = msg.data;} else {const obj = JSON.parse (msg.data); chatArr.push (obj);} await nextTick (); chatBox.value.scrollTop = chatBox.value.scrollHeight } function randomRgb () {let R = Math.floor (Math.random () * 130,110); let G = Math.floor (Math.random () * 130,110); let B = Math.floor (Math.random () * 130,110); return "rgb (" + R + "," + G + "," + B + ")" } function send () {if (textValue.value.trim (). Length > 0) {const obj = {name: name, txt: textValue.value, bg: bg,}; socket.send (JSON.stringify (obj)); textValue.value = ""; texta.value.focus () }} function close () {alert ("socket has been closed");} onMounted (() = > {init ();}); onUnmounted (() = > {socket.onclose = close;}) Return {send, textValue, chatArr, name, bg, chatBox, texta, randomRgb, count,;},}

The style file is the same as the local style, you can see the code above.

Server side

Here I used the ws module, and I also built a https server and used the more secure wss protocol. Next, let's take a look at how it works.

Const fs = require ("fs"); const httpServ = require ("https"); const WebSocketServer = require ("ws"). Server; / / reference Server class const cfg = {port: 3456, ssl_key: ".. / https/xxx.key", / / files required to configure https 2 ssl_cert: ".. / https/xxx.crt", / / files required to configure https 1} / / create request request listeners const processRequest = (req, res) = > {res.writeHead; res.end ("Websocket linked successfully");}; const app = httpServ .createServer ({/ / pass key and cert parameters key: fs.readFileSync (cfg.ssl_key), cert: fs.readFileSync (cfg.ssl_cert),}, processRequest) .creation (cfg.port) / / instantiate WebSocket server const wss = new WebSocketServer ({server: app,}); / / Group wss.broadcast = function broadcast (data) {wss.clients.forEach (function each (client) {client.send (data);});}; / / if WebSocket requests access, the wss object can handle wss.on in response to connection events ("connection", (wsConnect) = > {console.log ("Server monitoring")) Wss.broadcast (wss._server._connections); wsConnect.on ("message", (message) = > {wss.broadcast (message);}); wsConnect.on ("close", function close () {console.log ("disconnected"); wss.broadcast (wss._server._connections);})

We start the command on the cloud service.

Start successfully!

This is not over yet, because you are using the ip address port and must be forwarded to the domain name. So I use the nginx for forwarding and configure the following parameters.

Location / wsline/ {proxy_pass https://xxx:3456/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "Upgrade"; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-Proto https Proxy_redirect off;}

So, restart the cloud server and see how it works.

Project list

So, here's a cloud chat room that shows the number of people online in real time, so you can know how many people are chatting with you here.

At this point, I believe you have a deeper understanding of "how to use WebSocket network communication protocol to develop chat rooms". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.