Blog Options
Archive
<< April 2024 >>-
Wednesday 24
- Expanding the StellarDS.io tooling -
Monday 22
- Easy Guide to Building a Pexels Gallery App with TMS WEB Core -
Wednesday 17
- New free component for sophisticated file uploads with TMS WEB Core -
Tuesday 16
- Closing the gap with TMS FNC UI Pack new additions -
Thursday 11
- Unveiling the Latest Enhancements in TMS VCL UI Pack -
Friday 5
- TMS components and Delphi and C++Builder 12.1 -
Wednesday 3
- Customizing the login page of your application using TMS Sphinx
- A Python library for using StellarDS.io effortlessly
- Introducing: How it Works with Holger - Building a Pexels gallery app with TMS WEB Core video series
- TMS FNC Cloud Pack with StellarDS.io backend: unparalleled productivity in VCL & FMX
Authors
- Bernard Roussely (1)
- Wagner Landgraf (82)
- Roman Yankovsky (2)
- Bart Holvoet (27)
- Aaron Decramer (18)
- Pieter Scheldeman (99)
- Nancy Lescouhier (32)
- Adrian Gallero (33)
- Bruno Fierens (404)
- Marcos Douglas B. Santos (5)
- Wagner R. Landgraf (1)
- Bradley Velghe (16)
- Bernard (2)
- Andrew Simard (86)
- Holger Flick (15)
- Gjalt Vanhouwaert (30)
- Tunde Keller (22)
- Masiha Zemarai (119)
Blog
All Blog Posts | Next Post | Previous PostReal-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:
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;
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 WEB Core chat client application running in the Chrome browser
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.
David Rogger
Pelo o que entendi vocês só oferecem suporte a parte websocket client.
Marcelo
Bruno Fierens
\Demo\Basics\WebCrypto\TMSWeb_CryptoChatClient.dproj
Holger Flick
All Blog Posts | Next Post | Previous Post
Vieira Edson