Blog

All Blog Posts  |  Next Post  |  Previous Post

Real-time communications with WebSockets in TMS WEB Core applications

Bookmarks: 

Friday, May 18, 2018

TMS WEB Core promises easy, fast and RAD component based web application development. For fast, real-time updates on a web page with light-weight server-communications, WebSockets are an ideal mechanism.
That is why TMS WEB Core also comes with a WebSocket client:
TMS Software Delphi  Components
This is a non-visual component that makes it very easy to start using WebSocket based communication. Drop this component on the form, configure the WebSocket hostname & port and call WebSocketClient.Connect. When a connection is established, the OnConnect event is triggered. From the moment of connection, data sent by the WebSocket server is received via the event OnDataReceived. The signature of this event is:

procedure OnDataReceived(Sender: TObject; Origin: string;  Data: TJSObject);

Origin is the WebSocket server sending the data and the data itself is sent as a JavaScript Object. This means it can be different types. Sending data is equally easy. Simply call
WebSocketClient1.Send(AMessage: String);

To create an online chat application using this WebSocket technology takes only a few configurations in the component to configure the WebSocket server and a couple of lines of code. There is the logic that performs the Connect & Disconnect:
procedure TWebForm1.Connect;
begin
  if FConnected then
  begin
    WebSocketClient1.Disconnect;
  end
  else
  begin
    if WebEdit1.Text = '' then
      ShowMessage('Please enter a name first')
    else
      WebSocketClient1.Connect;
  end;
end;

To send a message when connected, we simply send the message as color/sender/message pair via the WebSocketClient.Send() function. Each chat user can choose a color and messages from the user are displayed in his selected color:

procedure TWebForm1.SendMessage;
var
  s: string;
begin
  if FConnected and (WebEdit2.Text <> '') then
  begin
    s := TMSFNCColorPicker1.SelectedColor) + '~' + WebEdit1.Text + '~' + WebEdit2.Text;
    // limit message length
    s := Copy(s,1,256);
    WebSocketClient1.Send(TTMSFNCGraphics.ColorToHTML(s);
    WebEdit2.Text := '';
  end;
end;

To display the message, we use the web-enabled TTMSFNCListBox component from the TMS FNC UI Pack. With this control we can show the received messages in listbox items with banding and some HTML formatting per item to indicate the sender and the message. The message is received via WebSocketClient.OnDataReceived as text and therefore we can use Data.toString to get the JavaScript object as text:
procedure TWebForm1.WebSocketClient1DataReceived(Sender: TObject; Origin: string;
  Data: TJSObject);
var
  it: TTMSFNCListBoxItem;
  sl: TStringList;
  s: String;
  n: string;
  c: TTMSFNCGraphicsColor;
  v: string;
begin
  it := lst.Items.Add;
  s := Data.toString;
  sl := TStringList.Create;
  try
    TTMSFNCUtils.Split('~', s, sl);
    if sl.Count > 2 then
    begin
      c := TTMSFNCGraphics.HTMLToColor(sl[0]);
      n := ''+sl[1]+'';
      v := sl[2];
      it.Text := n + ' says:
' + v; it.TextColor := c; end; finally sl.Free; end; end;

There isn't much more to creating a chat application for your TMS WEB Core applications except of course to put a WebSocket server application on your server that can equally be written with Delphi. With TMS WEB Core we include a sample WebSocket server service application.
Thanks to TMS WEB Core, you can directly see the result of our demo in your favorite web browser, no need to install anything to explore! Head over to https://download.tmssoftware.com/tmsweb/demos/tmsweb_chatclient/ to start chatting. TMS Software Delphi  Components

TMS WEB Core chat client application running in the Chrome browser
TMS Software Delphi  Components
TMS WEB Core chat client application running in the Safari browser on iPhone


Get started today: Technical previews of TMS WEB Core, TMS FNC UI web-enabled controls, web-enabled TMS XData, the first parts under the TMS RADical WEB umbrella are exclusively available now for all active TMS-ALL-ACCESS customers.



Bruno Fierens


Bookmarks: 

This blog post has received 5 comments.


1. Sunday, May 20, 2018 at 3:39:40 PM

it is definitely very straightforward simple to use, great job! one word to describe it is "awesome".

Vieira Edson


2. Monday, June 25, 2018 at 5:36:46 PM

I have gone through the post and it seems really interesting. Before I didn''t know about this web client software now I have somehow managed to get a basic idea about this. I have also checked <a href="https://microsoftsupport.co/microsoft-support-uk">Microsoft Support UK</a> about web clients.

David Rogger


3. Saturday, March 21, 2020 at 1:54:48 PM

Como funciona a parte Server do websocket? O componente da TMS me permite criar um servidor websocket? Ou apenas disponibiliza um executável que faz a parte server?

Pelo o que entendi vocês só oferecem suporte a parte websocket client.

Marcelo


4. Sunday, March 22, 2020 at 10:38:15 AM

There is a server demo with source code included (it is in the folder where the web client is) , did you check it?

Bruno Fierens


5. Sunday, March 22, 2020 at 6:36:38 PM

You can find it in...
\Demo\Basics\WebCrypto\TMSWeb_CryptoChatClient.dproj

Holger Flick




Add a new comment

You will receive a confirmation mail with a link to validate your comment, please use a valid email address.
All fields are required.



All Blog Posts  |  Next Post  |  Previous Post