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;

• 10：fxWebSocketClient1-OnConnect事件

  WebSocket客户端连接后，注册会话ID。

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

• 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;

• 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;

4. 运行结果

  使用鼠标在 PinToo 菜单，点击[保存至数据库]按钮，将其保存至数据库，点击[调试运行]确认能够正常打开。

  通过同步中心，将程序上传至手机PinToo运行；同步时，请确保手机已经运行PinToo，并且已经登陆。

  打开页面，IsoBean运行，分别点击 [API发送] 与 [WS发送]，可查看运行的状态。