Smart之網路聊天室

1. 說明

  通過Smart連線至FastWeb中的IsoBean模組，實現網路聊天室的功能。

  通過範例學習，可以掌握RestAPI與WebSocket控制元件的使用方法，並與FastWeb的IsoBean結合實現網路聊天室的功能。

  關於IsoBean的相關內容可參考 Bean通訊 與 IsoBean開發流程 。請注意，使用此示例需要配合FastWeb使用。

2. 設計明細

  開啟Smart智慧控制平臺，分別加入下插圖之控制元件。或者通過點選功能表欄[檔案] - [打開專案]選擇專案打開該範例。

  1：TLabel元件，控制元件名稱為 Label1。

  2：TIsoBeanServer元件，控制元件名稱為 IsoBeanServer1。

  3：TIsoBeanSource元件，控制元件名稱為 IsoBeanSource1。

  4：TRestAPI元件，控制元件名稱為 RestAPI1。

  5：TWebSocketClient元件，控制元件名稱為 WebSocketClient1。

  6：TIsoBeanVision元件，控制元件名稱為 IsoBeanVision1。

  7：TLabel元件，控制元件名稱為 Label2。

  8：TEdit元件，控制元件名稱為 Edit2。

  9：TLabel元件，控制元件名稱為 Label3。

  10：TEdit元件，控制元件名稱為 Edit3。

  11：TButton元件，控制元件名稱為 Button1。

  12：TButton元件，控制元件名稱為 Button2。

• Main窗體屬性設定

  • Caption：主窗體標題，設定為IsoBean Demo。
  • Height：窗體的畫素高度=768。
  • Width：窗體的畫素寬度=1024。
  • Color：設定背景顏色，設定為 $00F3F3EF。

• 1：Label1屬性設定

  • Caption：設定標籤顯示的文字，設定為 網路聊天室。
  • Font：設定顯示的字型內容，雙擊屬性編輯框，打開字型設定界面，設定的界面內容如下。

  

• 2：IsoBeanServer1屬性設定

  • Server：設定IsoBean伺服器的地址，示例設定為 http://localhost:8888/。
  • UserKey：設定發佈使用者的授權碼。表示為使用者的唯一ID。

• 3：IsoBeanSource1屬性設定

  • IsoBeanServer：選擇繫結的IsoBean伺服器，設定為 IsoBeanServer1。

    在控制元件處使用滑鼠右鍵單擊，選擇 Properties...，打開IsoBean屬性編輯頁面，在IsoBean處填寫編號 IB_wb-vis-0008_chatroom，點選 [從伺服器下載參數]，將參數下載至本地。點選 [確定] 按鈕確認屬性設定。

  

• 4：RestAPI屬性設定

    雙擊控制元件，打開編輯對話方塊，按照圖中的設定項進行設定。

  

• 5：WebSocketClient1屬性設定

  • Host：設定WebSocket伺服器的主機地址，設定為 127.0.0.1。
  • Port：設定WebSocket伺服器監聽的埠，設定為 8805。
  • Options：設定屬性項，設定其中的 Parameters 項為 /message。

• 6：IsoBeanVision1屬性設定

  • Active：設定是否啟用顯示，設定為 True。
  • IsoBeanSource：設定繫結的 IsoBeanSource，設定為 IsoBeanSource1。

• 7：Label2屬性設定

  • Caption：設定顯示的字幕內容。設定為 發送使用者名稱。
  • Font：設定顯示的字型，雙擊打開字型設定視窗，按照下述方式進行設定。

  

• 8：Edit2屬性設定 * Font：設定顯示的字型內容，雙擊屬性編輯框，打開字型設定界面，設定的界面內容如下。

  

  • Text：設定編輯框中顯示的文字，設定為 demo。

• 9：Label3屬性設定

  • Caption：設定顯示的字幕內容。設定為 發送內容。
  • Font：設定顯示的字型，雙擊打開字型設定視窗，按照下述方式進行設定。

  

• 10：Edit3屬性設定

  • Font：設定顯示的字型內容，雙擊屬性編輯框，打開字型設定界面，設定的界面內容如下。

  

  • Text：設定編輯框中顯示的文字，設定為 Hello IsoBean Smart Client。

• 11：Button1屬性設定

  • Caption：設定界面顯示的文字內容，設定為 API發送。

• 12：Button2屬性設定

  • Caption：設定界面顯示的文字內容，設定為 WS發送。

3. 程式設計

3.1. 程式初始設定

  程式初始化時，設定瀏覽器控制元件初始化，WebSocket客戶端發起連線。

constructor TMyHandler.Create(AOwner: TComponent);
begin
  FThis :=TBaseForm(AOwner);
  FThis.WebSocketClient1.Active := true;
end;

3.2. 事件設定

• 11：Button1-OnClick事件

  點選按鈕，使用API方式發送訊息。

procedure TMyHandler.Button1Click;
//API發送訊息
var
  msg: String;
begin
  msg := '{' +
  '"username": "demo",' +         
  '"action": "callback",' +    
  '"tag": "0",' +  
  '"data": {' +
    '"callbackcomponent": "wb-vis-0008_chatroom",' +   
    '"callbackeventname": "update",' +  
    '"callbackparams": [' +              
      '{' +
        '"paramname": "user",' +
        '"paramvalue": "' + FThis.Edit2.Text + '"' +
      '},' + 
      '{' +
        '"paramname": "message",' +
        '"paramvalue": "'+ FThis.Edit3.Text + ' By RestAPI"' +
      '}' +
    ']' +
  '}' +
  '}';
  FThis.RestAPI1.Body.Text := msg;
  FThis.RestAPI1.Send;
end;

• 12：Button2-OnClick事件

  點選按鈕，使用WebSocket伺服器發送訊息。

procedure TMyHandler.Button2Click;
//WS發送
var
  msg: String;
begin
  msg := '{' +
  '"username": "demo",' +         
  '"action": "callback",' +    
  '"tag": "0",' +  
  '"data": {' +
    '"callbackcomponent": "wb-vis-0008_chatroom",' + 
    '"callbackeventname": "update",' +  
    '"callbackparams": [' +              
      '{' +
        '"paramname": "user",' +
        '"paramvalue": "' + FThis.Edit2.Text + '"' +
      '},' + 
      '{' +
        '"paramname": "message",' +
        '"paramvalue": "'+ FThis.Edit3.Text + ' By WebSocket"' +
      '}' +
    ']' +
  '}' +
  '}';
  FThis.WebSocketClient1.WriteString(msg);
end;

• 5：WebSocketClient1-OnConnect事件

  當WebSocket客戶端連線至伺服器時，發送註冊訊息，進行會話ID註冊。

procedure TMyHandler.WebSocketClient1Connect;
//連線
begin
  FThis.WebSocketClient1.WriteString('{"action":"login","sid":"smartdemo"}');
end;

4. 運行結果

  使用滑鼠點選工具欄運行（Run），測試運行結果。

  通過工具欄儲存，將程式儲存為 sdb 專案檔案。

  運行等待瀏覽器控制元件初始化完成後，點選URL地址編輯欄右側的按鈕載入網頁，界面中顯示聊天的記錄內容。點選 [API發送] 與 [WebSocket發送] 可使用兩種方式發送訊息顯示。