Have an amazing solution built in RAD Studio? Let us know. Looking for discounts? Visit our Special Offers page!
CodeDelphiRAD Studio

Example WebSockets Server And Client Chat Application

smartmockups_kp1n7xyw

WebSockets are gaining more and more strength with the implementation in most browsers, including for mobile devices. This article introduces briefly, the concept of WebSockets, and creates a chat app using a websockets component for Delphi, by Delphi component provider Esegece.

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 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 multi-player 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 over 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.

Example WebSockets Server And Client Chat Application - client side screen

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:

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:

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:

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.

Example WebSockets Server And Client Chat Application - example client and server running in the RAD Studio Delphi IDE

You can check the full code source at: https://github.com/brunomileto/chat_websocket


What's New for RAD Studio 11

Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition

Related posts
C++CodeDelphiRAD Studio

Learn to Use Powerful SGC WebSockets WebRTC in C++ Builder

C++CodeDelphiRAD Studio

Websockets WebRTC In Real-Time - Do You Know How To Do It?

CodeDelphiRAD Studio

Add STOMP to your apps for lightweight real-time streaming

DelphiRAD Studio

Websockets Harness Real-Time Power In Your Delphi Apps

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

IN THE ARTICLES