Real-time communications with WebSockets in TMS WEB Core applications

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;

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 http://www.tmssoftware.biz/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.