# 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发送] 可使用两种方式发送消息显示。