Example WebSockets Server And Client Chat Application
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. 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; 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; 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); 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 […]
