網路聊天室

# PinToo之網路聊天室

# 1. 說明

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

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

關於 IsoBean 的相關內容可參考 Bean通訊與 IsoBean開發流程。

# 2. 設計明細

開啟PinToo設計器，分別加入下插圖之控制元件。或者點選左上角的[打開模板Lib檔案]選擇模板檔案來打開對應模板。

1：TfxIsoBeanServer 元件，控制元件名稱為 fxIsoBeanServer1。

2：TfxIsoBeanSource 元件，控制元件名稱為 fxIsoBeanSource1。

3：TfxIsoBeanVision 元件，控制元件名稱為 fxIsoBeanVision1。

4：TfxLabel 元件，控制元件名稱為 fxLabel1。

5：TfxLabel 元件，控制元件名稱為 fxLabel2。

6：TfxEdit 元件，控制元件名稱為 fxEdit2。

7：TfxEdit 元件，控制元件名稱為 fxEdit3。

8：TfxRestAPI 元件，控制元件名稱為 fxRestAPI1。

9：TfxSuperButton 元件，控制元件名稱為 fxSuperButton1。

10：TfxWebSocketClient 元件，控制元件名稱為 fxWebSocketClient1。

11：TfxSuperButton 元件，控制元件名稱為 fxSuperButton2。

fxRunFrame屬性設定
- Height：設定頁面高度=800。
- Width：設定頁面寬度=400。
1：fxIsoBeanServer1屬性設定
- Server：設定IsoBean伺服器的地址以下的內容假設伺服器的地址為 http://192.168.0.157:8888/。
- UserKey：設定使用者授權碼，授權碼為使用者的唯一ID。
2：fxIsoBeanSource1屬性設定
- IsoBeanServer：設定繫結的IsoBeanServer，設定為 IsoBeanServer1。
雙擊控制元件，打開編輯器，在IsoBean編號中輸入 IB_ab-vis-0001_m_chatroom，點選 [從伺服器下載參數]，將參數下載至本地。點選 [確定] 關閉對話方塊。
3：fxIsoBeanVision1屬性設定
- Active：是否啟用顯示。設定為 True。
- IsoBeanSource：設定繫結的IsoBeanSource控制元件，設定為 IsoBeanSource1。
4：fxLabel1屬性設定
- Text：設定標籤顯示的文字，設定為 使用者名稱。
5：fxLabel2屬性設定
- Text：設定標籤顯示的文字，設定為 訊息。
6：fxEdit2屬性設定
- Text：設定編輯框中預設顯示的文字，設定為 demo。
7：fxEdit3屬性設定
- Text：設定編輯框中預設顯示的文字，設定為 Hello PinToo。
8：fxRestAPI1屬性設定

雙擊打開屬性設定框，參照以下內容進行設定，設定完成後點選 [OK] 按鈕儲存設定。

9：fxSuperButton1屬性設定

ButtonType：設定按鈕顯示的型別，設定為 TfxSvgButton。

SvgData：設定SVG圖形定義文字。

<path d="M18.2318115234375,55.998046875 L81.798828125,29.4990234375 L18.2318115234375,3 L18.201171875,23.6104431152344 L63.6279525756836,29.4990234375 L18.201171875,35.3876037597656 Z" p-id="2051" fill="#FF2C2C2C" stroke="Null"></path>

Text：設定按鈕上顯示的文字，設定為 API發送。

10：fxWebSocketClient1屬性設定
- Host：設定連線的 WebSocket 主機的地址，設定為 192.168.0.157。
- Port：設定連線的伺服器埠號，設定為 8805。
- Options：設定選項。
  - Parameters：設定參數，設定為 /message。

11：fxSuperButton2屬性設定

ButtonType：設定按鈕顯示的型別，設定為 TfxSvgButton。

SvgData：設定SVG圖形定義文字。

<path d="M18.2318115234375,55.998046875 L81.798828125,29.4990234375 L18.2318115234375,3 L18.201171875,23.6104431152344 L63.6279525756836,29.4990234375 L18.201171875,35.3876037597656 Z" p-id="2051" fill="#FF2C2C2C" stroke="Null"></path>

Text：設定按鈕上顯示的文字，設定為 WS發送。

# 3. 程式設計

點選程式設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式需引用 ufxRestAPI 與 uWebSocketClient。

fxRunFrame-OnAfterRunScript事件

程式初始化設定，連線至目標網頁的 IsoBean 界面，啟用 WebSocket 客戶端

Procedure fxRunFrameAfterScriptRun(Sender: TObject);
Begin
  fxWebSocketClient1.Active := True;
End;

1
2
3
4

10：fxWebSocketClient1-OnConnect事件

WebSocket客戶端連線后，註冊會話ID。

Procedure fxWebSocketClient1OnConnect(Connection: TsgcWSConnection);
Begin
  fxWebSocketClient1.SendMsg('{"action":"login","sid":"pintoodemo"}');
End;

1
2
3
4

9：fxSuperButton1-OnClick事件

點選 [API發送] 按鈕，呼叫API發送訊息。

Procedure fxSuperButton1OnClick(Sender: TObject);
//API發送訊息
var
  msg: String;
begin
  msg := '{' +
  '"username": "demo",' +         
  '"action": "callback",' +  
  '"tag": "0",' +    
  '"data": {' +
    '"callbackcomponent": "ab-vis-0001_m_chatroom",' +   
    '"callbackeventname": "update",' +  
    '"callbackparams": [' +              
      '{' +
        '"paramname": "user",' +
        '"paramvalue": "' + fxEdit2.Text + '"' +
      '},' + 
      '{' +
        '"paramname": "message",' +
        '"paramvalue": "'+ fxEdit3.Text + ' By RestAPI"' +
      '}' +
    ']' +
  '}' +
  '}';
  fxRestAPI1.Body.Text := msg;
  fxRestAPI1.Send;
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

11：fxSuperButton2-OnClick事件

點選 [WS發送] 按鈕，呼叫 WebSocket 發送訊息。

Procedure fxSuperButton2OnClick(Sender: TObject);
//WS發送
var
  msg: String;
begin
  msg := '{' +
  '"username": "demo",' +         
  '"action": "callback",' +  
  '"tag": "0",' +    
  '"data": {' +
    '"callbackcomponent": "ab-vis-0001_m_chatroom",' +   
    '"callbackeventname": "update",' +  
    '"callbackparams": [' +              
      '{' +
        '"paramname": "user",' +
        '"paramvalue": "' + fxEdit2.Text + '"' +
      '},' + 
      '{' +
        '"paramname": "message",' +
        '"paramvalue": "'+ fxEdit3.Text + ' By WebSocket"' +
      '}' +
    ']' +
  '}' +
  '}';
  fxWebSocketClient1.SendMsg(msg);
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 4. 運行結果

使用滑鼠在 PinToo 功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

通過同步中心，將程式上傳至手機PinToo運行；同步時，請確保手機已經運行PinToo，並且已經登陸。

打開頁面，IsoBean運行，分別點選 [API發送] 與 [WS發送]，可檢視運行的狀態。

← SVG組態