Delphi Example WebSockets Server And Client Chat Application

[FireWind]

Example WebSockets Server And Client Chat Application
By Bruno Mileto May 28, 2021

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 Для просмотра ссылки Войди или Зарегистрируйся.

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 Для просмотра ссылки Войди или Зарегистрируйся. Also, you can check some implementations Для просмотра ссылки Войди или Зарегистрируйся and the documentation Для просмотра ссылки Войди или Зарегистрируйся. 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 Для просмотра ссылки Войди или Зарегистрируйся.

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:

procedure TFrmClient.FormShow(Sender: TObject);
begin
  sgcWsClient.Active := True;
end;
 
procedure TFrmClient.FormClose(Sender: TObject; var Action: TCloseAction);
begin
  sgcWsClient.Active := False;
end;

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:

procedure TFrmClient.sgcWsClientMessage(Connection: TsgcWSConnection;
  const Text: string);
begin
  mmLog.Lines.Add(Text);
end;

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:

sgcWsClient.WriteData(edtName.Text + ': ' + edtMessage.Text);

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:

procedure TFrmServer.sgcWsHTTPServerMessage(Connection: TsgcWSConnection;
  const Text: string);
begin
  mmLog.Lines.Add('Message: ' + Text);
  sgcWsHTTPServer.Broadcast(Text);
end;

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.