网络聊天室
# 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;
2
3
4
5
# 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;
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
- 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;
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
- 5:WebSocketClient1-OnConnect事件
当WebSocket客户端连接至服务器时,发送注册消息,进行会话ID注册。
procedure TMyHandler.WebSocketClient1Connect;
//连接
begin
FThis.WebSocketClient1.WriteString('{"action":"login","sid":"smartdemo"}');
end;
2
3
4
5
# 4. 运行结果
使用鼠标点击工具栏运行(Run),测试运行结果。
通过工具栏保存,将程序保存为 sdb 项目文件。
运行等待浏览器控件初始化完成后,点击URL地址编辑栏右侧的按钮加载网页,界面中显示聊天的记录内容。点击 [API发送]
与 [WebSocket发送]
可使用两种方式发送消息显示。