WebSockets are gaining traction as more browsers, including those for mobile devices, support them. This article introduces WebSockets briefly and creates a chat app using a Websockets component for Delphi, a Windows Program Development, provided by Delphi component provider Esegece.
Table of Contents
What are Websockets?
The WebSockets protocol allows the creation of a client-server communication channel with bidirectional transmission where both sides (client and server) can transmit data simultaneously. WebSockets came to fill in the shortcomings of the HTTP protocol for this purpose, which, by the way, is unidirectional (transmission occurs only from one end to the other). The most common uses for WebSockets are, among other things: home brokers (where quotes are updated all the time), social network feeds, chat apps, collaborative tools, and even multiplayer games
What are the differences between HTTP and WebSockets?
WebSockets are a great choice if there is a need for a connection to remain open for a long time for constant data exchange. In summary, the benefits of HTTP are Low Latency, Persistent Connection, and Full-Duplex (bidirectional transition).
A WebSockets Delphi component
To create our chat app we will use the WebSockets component. Here we are using the eSeGeCe Delphi WebSocket component. You can check its benefits here. Also, you can check some implementations here and the documentation here. To start the work, you need to download the eSeGeCe Delphi WebSocket Components and the Indy Components. These two and a video of how to install them, you can check here.
How to create a WebSockets Delphi client for a chat application
Let’s start with the client-side. After installing the components, get a TsgcWebSocketClient component along with two TEdit a TMemo, and a TButton. The two TEdit controls will be used as name and message fields. The TMemo control will be the field that displays all messages. In the TsgcWebSocketClient properties, you need to change just the host and port. Add ‘localhost’ to the host and 5416 to the port.
Looking at the code, there are two main parts. The connection and the messages. For connection and disconnection, you can add the following in the OnShow and OnClose methods of the form:
[crayon-673f82f2d8188126348306/]To receive a message is very simple. The OnMessage event of the TsgcWebSocketClient, already comes with the text sended by the server. You just need to get it and put on the TMemo component:
Sending a message over a WebSockets connection using Delphi
To send a message is also, very simple. You can use the OnClick event of the button:
[crayon-673f82f2d8191824750222/]Creating a WebSocket Delphi Server for a Chat Application
For this WebSocket Delphi Server Example, we will need the TsgcWebSocketHTTPServer component, and at least, a TMemo. In the sgcWebSocketHTTPServer properties Options, mark the HTML files. Also in Fallback/ServerSentEvents/Retry, set to 3 and set the port to 5416.
Here we also have two main parts, when looking in the code: the connection, and the messages. You can do the same here for the connection as we did on the client-server section, for the TsgcWebSocketHTTPServer component.
For the message, we will receive all the messages but we also want to send them to all other connected client-side applications. We can do these two things on the same OnMessage event:
[crayon-673f82f2d8192343430412/]Putting it altogether and running the demo WebSockets chat applications in the RAD Studio Delphi IDE
Now, you just need to run the server and two client applications. This way you can simulate a chat app alongside a server. Here’s an example of the finished client / server WebSockets chat application running in the RAD Studio Delphi IDE.
You can check the full code source at: https://github.com/brunomileto/chat_websocket