「项目实战」.前端WebSocket客户端之代码实现

界面功能实现。界面编写采用第三方CSS库bootstrap 4.6.1版本，整个界面功能分为3部分：

1.顶部显示应用的标题。其效果为文字居中对齐，并加入适当间隔的外边距，代码如下图1所示：

图1

2.左侧栏为显示待办事项的操作区。标题的底部显示为一个容器，在这个容器内使用一个行组件，采用col-4和col-8将整个容器的宽度以4:8的比例进行分割。左侧栏的宽度占比值为4。左侧栏内是操作区定义的各个控件，比如：标题的编辑框、结束时间的时间选择控件和是否已经完成的状态复选框，如图2所示：

图2

下表1中列出里左侧栏中使用到的组件Id值、类型及其含义

表1

3.右侧待办事项列表栏。与左侧栏相对的是右侧栏，它是用以展现待办事项的区域。区域内容以表格的方式展现，并在表格的每一行末尾增加了“修改”和“删除”操作按钮，图3中显示了右侧栏对应的代码，col-8表示右侧栏在整个行宽中占比为8。

图3

图3中所涉及到的元素、类型及其含义为：

表2

整个界面完成之后，接下来便是逻辑代码的编写了。首先在代码的起始位置定义一些常量数据，如图4所示：

图4

图4中第85-88行定义了待办事项的操作ID值，它表示了双方通讯的消息类型，客户端和服务器使用这些ID值确定当前执行的是哪类待办事项操作，比如：客户端发送请求ID为ADD_TODO的消息，那么服务器就执行创建待办事项，消息ID定义及其对应的数值如下表3所示。

表3

图4中第90-92行代码定义了操作状态值，每一个操作状态值决定了可以执行哪类操作，比如在OPERATION_IDLE状态下可以点击“新建事项”按钮，在OPERATION_CREATE和OPERATION_UPDATE状态下可以编辑左侧栏中的数据等。

初始化应用界面。初始化界面是指：1. 对应用页面中的编辑框、按钮、列表、复选框等页面元素绑定对应的变量，那么在程序运行时就可以使用这些变量操作这些页面元素；2.对绑定的变量添加事件处理器，比如：为按钮添加‘click’事件。如下图5表示：

图5

WebSocket客户端的初始化是在所有的操作之前进行的，当程序加载Javascript文件时，初始化WebSocket的操作会自动执行，通过设定的主机地址和端口号与WebSocket服务器建立连接，之后设置WebSocket客户端的onmessage处理函数，用来接收来自服务器端的消息响应。在处理消息响应时，客户端所关心的消息类型为图1中定义的4类消息：ADD_TODO，DELETE_TODO，UPDATE_TODO和LIST_TODO，每一类消息对应一个消息处理函数，所有的消息处理函数完成之后会执行页面更新操作，调用resetContext函数，代码如图6所示。

图6

首先，看一下如何创建一个待办事项。如果需要创建一个待办事项，那么当前的操作状态应该为OPERATION_CREATE状态，创建待办事项的请求发送至WebSocket服务器之前，需要先将操作区中的信息收集起来，也就是将页面中数据转移到对应的变量中，图7代码第160-164行代码构建了一个todo对象，其中字段值存储当前界面中待办事项的数据，我们通过使用ID为ADD_TODO的消息并将这个todo对象作为请求消息的payload字段发送至服务器，对应第173-176行代码，服务将会根据当前的请求消息ID执行创建操作，在服务器端将构建一个完整的待办事项并进行存储，最后将这个完整的待办事项又回传至本客户端应用。

图7

客户端对于ADD_TODO消息响应的处理逻辑。客户端对来自服务器端的响应处理全部在onmessage的处理函数中实现，如图6所示，在switch语句中检查当前需要处理的消息类型是什么，如果是ADD_TODO消息，那么就会进入onCreateTodoItem函数中处理创建待办事项逻辑，在此函数中主要是获取服务器端提供的待办事项，客户端构建出对应的数据对象，并将这个待办事项展示在右侧栏的表格中，至此，一个创建待办事项的消息处理全部完成。

删除待办事项的处理逻辑。这个操作是在页面的右侧栏中的“删除”按钮触发的，当此删除操作触发后，客户端立即向服务器发送一个DELETE_TODO消息，这个消息只需要携带待删除待办事项的ID值，服务器根据接收到的消息ID和待办实现ID在服务端进行删除操作，删除操作完成之后，会将一个含有已删除的待办事项ID值作为响应的payload值回传给客户端。删除待办事项的请求发送是由下面的代码完成的：

图8

当客户端应用通过onmessage处理函数接收到来自服务器的DELETE_TODO消息响应之后，会执行onDeleteTodoItem函数进行客户端界面操作，依据已删除待办事项的ID值，将右侧列表中的对应数据行删除。

图9

更新待办事项的处理逻辑。更新待办事项操作与创建待办事项的逻辑有点类似，更新操作是通过点击右侧栏中的“修改”按钮触发的，之后程序进入了OPERATION_UPDATE态，它同时会将对应的待办事项信息全部赋值到对应的左侧栏控件中，并将当前上下文中的currentId值设置为这个待办事项的ID值，之后可以修改左侧栏中的任意数据，之前实现的逻辑是只支持修改标题，本应用支持除了Id字段之外的所有其它字段的修改。完成修改操作之后，程序根据当前的状态值执行图7第178-183行中的代码，这些代码负责构建UPDATE_TODO消息，并发送给服务器。同样的操作，服务器依据对应的请求ID和待办事项的信息进行服务器端的数据更新，完成更新之后，会将更新后的数据以payload的方式回传给客户端，客户端通过onUpdateTodoItem函数进行处理。

图10

图10中函数负责查找对应Id的元素值，它是一个行元素(tr)，此函数使用服务器返回的待办事项信息对表中的0-2单元格进行数值更新，最后完成一个更新待办事项的操作。

获取所有待办事项的处理逻辑。每一次待办事项的处理，在服务器端都会有对应的操作，也会将数据记录下来，只要是WebSocket服务器不进行重新启动，那么，所创建的待办事项、修改的内容和删除的内容都会体现在待办事项的列表中，我们使用一个LIST_TODO消息请求来获取这些待办信息。

图11

客户端通过点击“获取所有事项”按钮发送此请求，WebSocket服务器接收到此消息后，它会将当前存储的所有待办事项以消息响应的payload字段的方式回传给客户端，依据图7中第299-301行代码，待办事项列表的处理交由onListTodoItems,它的功能主要是展示最新的待办事项数据，在展现新的数据之前需要将之前的数据进行清除操作，如图12所示

图12

图12中第311行代码将tbody中的所有数据情况，使用最新的待办事项列表构建新的表格数据。

注意图6中304行代码，它的作用是接收到来自服务器端的请求处理之后，将客户端的界面重新设置为空闲状态，以便于用户执行下一步操作。

到目前为止，WebSocket相关的文章一共三篇（这一篇和之前的两篇《构建一个待办事项WebSocket服务器》和《实现一个待办事项WebSocket客户端》）实现了一个WebSocket服务器和两个客户端：一个为C# WebSocket客户端，另一个为Web页面WebSocket客户端。也验证了不同语言之间通过WebSocket协议可以正常通讯的特性，WebSocket协议介绍暂时告一段落，猜一下我们的下一个技术分享会是什么？我们下篇文章见。