WebSocket in real-time chat room

To learn more about open source, please visit:

​​51CTO Open Source Basic Software Community​​

​​https://ost..com​​

Preface

If we want to implement functions like WeChat chat, it is obviously not enough to communicate within the network, so the soft bus does not work with such long-distance transmission. If we want to complete the WeChat chat function, the traditional method is to use webSocket to carry out full-duplex communication with the help of the server.

What is WebSocket?

WebSocket is a network communication protocol that performs full-duplex communication over a single TCP connection.

Before webSocket, everyone used HTTP protocol for network communication. However, HTTP protocol is a stateless, connectionless, one-way application layer protocol. Therefore, the client can only make one-way requests to the server. The server cannot actively send messages to the client, which makes it difficult to carry out services such as real-time chat.

Some developers use HTTP for long polling, which means that HTTP must keep connecting requests for a period of time to obtain the latest server messages. This is obviously inefficient and wastes resources.

Therefore, WebSocket was born. Only one connection is required to maintain full-duplex communication.

Demo

Next, we will use the official WebSocket interface to implement a simple real-time chat room demo. The effect is as follows:

Code Implementation

You can see the interface description in the official documentation. We only need to use a few simple interfaces to meet our business needs.

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/websocket-connection-0000001333321005.

1. Apply for network permissions

Register the network permission in the config.json file, which allows the program to open the network socket and make a network connection.

 "reqPermissions" : [
 {
 "name" : "ohos.permission.INTERNET"
 }
 ]

2. Import the webSocket module

 import webSocket from '@ohos.net.webSocket' ;

3. Create a webSocket object

Then we call the createWebSocket() interface to generate a webSocket object and save it.

 let ws = webSocket . createWebSocket ();

4. Connecting to the webSocket channel

Call the connect() interface to connect. A URL is required as a parameter. In this demo, a previously developed server interface is used directly for calling, but it is not open to the public. Therefore, you only need to put the developed interface address into "wsURL".

 onInit () {
 let that = this ;
 ws . connect ( "wsURL" , ( err , value ) => {
 if ( ! err ) {
 console .log ( "xxx---connect success" );
 } else {
 console . log ( "xxx---connect fail, err:" + JSON . stringify ( err ));
 }
 });
 },

5. Subscribe to channel message updates

Here we call the on( type:'message' ) interface to listen for messages. It should be noted that the server passes a string type, so if the message is a JSON object, you need to use JSON.parse() to parse it and restore it to a JSON object.

 onInit () {
 let that = this ;
 ws . on ( 'message' , ( err , value ) => {
 console . log ( "xxx---on message, message:" + value );
 //The string passed is serialized and needs to be deserialized into a JSON object
 let dataObj = JSON . parse ( value )
 console . log ( "xxx---parse success---postId: " + dataObj . postId + ",message:" + dataObj . message )
 that . message . push ( dataObj )
 console . log ( "xxx---check message: " + JSON . stringify ( that . message ))
 });
 },

6. Send Message

Then call the send() interface to send the message. Note that if you want to pass a JSON object, you must use JSON.stringify() to serialize it to ensure that we pass it in the form of a stream string.

In the callback of this interface, we can also print it out to see whether the message was sent successfully.

 sendMessage () {
 let that = this ;
 let data = {
 postId : that . id ,
 message : that . sendMessage
 }
 let dataStr = JSON . stringify ( data )
 ws . send ( dataStr , ( err , value ) => {
 if ( ! err ) {
 console .log ( "xxx---send success" );
 } else {
 console . log ( "xxx---send fail, err:" + JSON . stringify ( err ));
 }
 });
 that . message . push ( data )
 },

7. Hide the title bar

Careful friends will find that the black title bar shown in my demo is gone. In fact, it can be hidden. Just add a few lines of code under module.abilities in the config.json file.

 "metaData" : {
 "customizeData" :[
 {
 "name" : "hwc-theme" ,
 "value" : "androidhwext:style/Theme.Emui.NoTitleBar" ,
 "extra" : ""
 }
 ]
 }

8. Style design

The next step is to simply design the interface style and render the obtained messages.

 < div class = "container" >
 < div style = "width: 100%;height: 8%;color: #ff86868a;font-size: 25px;justify-content: center;position: absolute;" >
 < text style = "top: 10px;" >
 Live Chat Room
 </ text >
 </ div >
 < list style = "height: 80%;" >
 < list-item for = "{{message}}" class = "{{$item.postId==id?'listItemRight':'listItemLeft'}}" >
 < div class = "listItemDiv" >
 < text style = "padding:5px;border-radius: 10px;font-size: 20px;margin: 5px;max-width: 70%;" >
 {{$item.message}}
 </ text >
 </ div >
 </ list-item >
 </ list >
 < div style = "position: absolute;left:10px;bottom: 20px;" >

 < textarea id = "textarea" class = "textarea" extend = "true"
 placeholder = "Please enter chat information"
 onchange = "inputChange" >
 </ textarea >
 < button style = "width: 75px;height: 50px;margin-left: 10px;background-color: #ff4848f5;" onclick = "sendMessage" > Send </ button >
 </ div >

 </ div > 

 .container {
 display : flex ;
 flex-direction : column ;
 justify-content : center ;
 align-items : center ;
 left : 0px ;
 top : 0px ;
 width : 100% ;
 height : 100% ;
 }
 .textarea {
 placeholder-color : gray ;
 width : 70% ;
 }

 .listItemDiv {
 background-color : #ff87f3d0 ;
 border-radius : 10px ;

 }

 .listItemLeft {
 margin : 10px ;
 width : 100% ;
 justify-content : flex-start ;
 }
 .listItemRight {
 margin : 10px ;
 width : 100% ;
 justify-content : flex-end ;
 }

You can click the following link to download the attachments related to the article:

https://ost.com/resource/2210.

To learn more about open source, please visit:

​​51CTO Open Source Basic Software Community​​

​​https://ost..com​​.