项目实战。前端WebSocket客户端之代码实现

　　界面功能实现。界面编写采用第三方CSS库bootstrap4。6。1版本，整个界面功能分为3部分：
　　1。顶部显示应用的标题。其效果为文字居中对齐，并加入适当间隔的外边距，代码如下图1所示：
　　图1
　　2。左侧栏为显示待办事项的操作区。标题的底部显示为一个容器，在这个容器内使用一个行组件，采用col4和col8将整个容器的宽度以4：8的比例进行分割。左侧栏的宽度占比值为4。左侧栏内是操作区定义的各个控件，比如：标题的编辑框、结束时间的时间选择控件和是否已经完成的状态复选框，如图2所示：
　　图2
　　下表1中列出里左侧栏中使用到的组件Id值、类型及其含义
　　组件Id
　　类型
　　含义
　　title
　　input
　　标题编辑框
　　endtime
　　input：datetime
　　结束日期
　　status
　　input：checkbox
　　状态复选框
　　addorupdatetodo
　　button
　　新建或更新事项
　　listtodo
　　button
　　获取所有待办项目数据
　　表1
　　3。右侧待办事项列表栏。与左侧栏相对的是右侧栏，它是用以展现待办事项的区域。区域内容以表格的方式展现，并在表格的每一行末尾增加了修改和删除操作按钮，图3中显示了右侧栏对应的代码，col8表示右侧栏在整个行宽中占比为8。
　　图3
　　图3中所涉及到的元素、类型及其含义为：
　　组件
　　类型
　　含义
　　todolist
　　table
　　构建待办事项的表格
　　tbody
　　tbody
　　显示待办事项，不含表头信息
　　表2
　　整个界面完成之后，接下来便是逻辑代码的编写了。首先在代码的起始位置定义一些常量数据，如图4所示：
　　图4
　　图4中第8588行定义了待办事项的操作ID值，它表示了双方通讯的消息类型，客户端和服务器使用这些ID值确定当前执行的是哪类待办事项操作，比如：客户端发送请求ID为ADDTODO的消息，那么服务器就执行创建待办事项，消息ID定义及其对应的数值如下表3所示。
　　ID
　　值
　　含义
　　ADDTODO
　　0hr创建待办事项
　　DELETETODO
　　1hr删除待办事项
　　UPDATETODO
　　2hr修改待办事项
　　LISTTODO
　　3hr获取待办事项列表
　　表3
　　图4中第9092行代码定义了操作状态值，每一个操作状态值决定了可以执行哪类操作，比如在OPERATIONIDLE状态下可以点击新建事项按钮，在OPERATIONCREATE和OPERATIONUPDATE状态下可以编辑左侧栏中的数据等。
　　初始化应用界面。初始化界面是指：1。对应用页面中的编辑框、按钮、列表、复选框等页面元素绑定对应的变量，那么在程序运行时就可以使用这些变量操作这些页面元素；2。对绑定的变量添加事件处理器，比如：为按钮添加‘click’事件。如下图5表示：
　　图5
　　WebSocket客户端的初始化是在所有的操作之前进行的，当程序加载Javascript文件时，初始化WebSocket的操作会自动执行，通过设定的主机地址和端口号与WebSocket服务器建立连接，之后设置WebSocket客户端的onmessage处理函数，用来接收来自服务器端的消息响应。在处理消息响应时，客户端所关心的消息类型为图1中定义的4类消息：ADDTODO，DELETETODO，UPDATETODO和LISTTODO，每一类消息对应一个消息处理函数，所有的消息处理函数完成之后会执行页面更新操作，调用resetContext函数，代码如图6所示。
　　图6
　　首先，看一下如何创建一个待办事项。如果需要创建一个待办事项，那么当前的操作状态应该为OPERATIONCREATE状态，创建待办事项的请求发送至WebSocket服务器之前，需要先将操作区中的信息收集起来，也就是将页面中数据转移到对应的变量中，图7代码第160164行代码构建了一个todo对象，其中字段值存储当前界面中待办事项的数据，我们通过使用ID为ADDTODO的消息并将这个todo对象作为请求消息的payload字段发送至服务器，对应第173176行代码，服务将会根据当前的请求消息ID执行创建操作，在服务器端将构建一个完整的待办事项并进行存储，最后将这个完整的待办事项又回传至本客户端应用。
　　图7
　　客户端对于ADDTODO消息响应的处理逻辑。客户端对来自服务器端的响应处理全部在onmessage的处理函数中实现，如图6所示，在switch语句中检查当前需要处理的消息类型是什么，如果是ADDTODO消息，那么就会进入onCreateTodoItem函数中处理创建待办事项逻辑，在此函数中主要是获取服务器端提供的待办事项，客户端构建出对应的数据对象，并将这个待办事项展示在右侧栏的表格中，至此，一个创建待办事项的消息处理全部完成。
　　删除待办事项的处理逻辑。这个操作是在页面的右侧栏中的删除按钮触发的，当此删除操作触发后，客户端立即向服务器发送一个DELETETODO消息，这个消息只需要携带待删除待办事项的ID值，服务器根据接收到的消息ID和待办实现ID在服务端进行删除操作，删除操作完成之后，会将一个含有已删除的待办事项ID值作为响应的payload值回传给客户端。删除待办事项的请求发送是由下面的代码完成的：
　　图8
　　当客户端应用通过onmessage处理函数接收到来自服务器的DELETETODO消息响应之后，会执行onDeleteTodoItem函数进行客户端界面操作，依据已删除待办事项的ID值，将右侧列表中的对应数据行删除。
　　图9
　　更新待办事项的处理逻辑。更新待办事项操作与创建待办事项的逻辑有点类似，更新操作是通过点击右侧栏中的修改按钮触发的，之后程序进入了OPERATIONUPDATE态，它同时会将对应的待办事项信息全部赋值到对应的左侧栏控件中，并将当前上下文中的currentId值设置为这个待办事项的ID值，之后可以修改左侧栏中的任意数据，之前实现的逻辑是只支持修改标题，本应用支持除了Id字段之外的所有其它字段的修改。完成修改操作之后，程序根据当前的状态值执行图7第178183行中的代码，这些代码负责构建UPDATETODO消息，并发送给服务器。同样的操作，服务器依据对应的请求ID和待办事项的信息进行服务器端的数据更新，完成更新之后，会将更新后的数据以payload的方式回传给客户端，客户端通过onUpdateTodoItem函数进行处理。
　　图10
　　图10中函数负责查找对应Id的元素值，它是一个行元素（tr），此函数使用服务器返回的待办事项信息对表中的02单元格进行数值更新，最后完成一个更新待办事项的操作。
　　获取所有待办事项的处理逻辑。每一次待办事项的处理，在服务器端都会有对应的操作，也会将数据记录下来，只要是WebSocket服务器不进行重新启动，那么，所创建的待办事项、修改的内容和删除的内容都会体现在待办事项的列表中，我们使用一个LISTTODO消息请求来获取这些待办信息。
　　图11
　　客户端通过点击获取所有事项按钮发送此请求，WebSocket服务器接收到此消息后，它会将当前存储的所有待办事项以消息响应的payload字段的方式回传给客户端，依据图7中第299301行代码，待办事项列表的处理交由onListTodoItems，它的功能主要是展示最新的待办事项数据，在展现新的数据之前需要将之前的数据进行清除操作，如图12所示
　　图12
　　图12中第311行代码将tbody中的所有数据情况，使用最新的待办事项列表构建新的表格数据。
　　注意图6中304行代码，它的作用是接收到来自服务器端的请求处理之后，将客户端的界面重新设置为空闲状态，以便于用户执行下一步操作。
　　到目前为止，WebSocket相关的文章一共三篇（这一篇和之前的两篇《构建一个待办事项WebSocket服务器》和《实现一个待办事项WebSocket客户端》）实现了一个WebSocket服务器和两个客户端：一个为CWebSocket客户端，另一个为Web页面WebSocket客户端。也验证了不同语言之间通过WebSocket协议可以正常通讯的特性，WebSocket协议介绍暂时告一段落，猜一下我们的下一个技术分享会是什么？我们下篇文章见。