「项目实战」.待办事项之WebSocket Web客户端(一)

之前的文章中《构建一个待办事项WebSocket服务器》和《实现一个待办事项WebSocket客户端》实现了WebSocket的客户端和服务器功能，通过使用WebSocket协议实现了客户端和服务器端4种消息的请求与响应，这两个程序都是控制台程序，如果作为一个实际应用的程序，对于用户来说是十分不方便操作的。现代软件对于用户来说是十分友好的，基本都是基于图形界面的应用程序，为此，我们也将实现一个基于图形界面的应用，本项目程序选用了Web端作为界面开发平台，使用前端开发技术HTML、Javascript和CSS构建整个应用。

项目构建目标为一个WebSocket客户端待办事项应用。这是一个只有一个页面的应用，通过WebSocket与之前的项目采用C#编写的WebSocket服务器进行信息交互，也验证了WebSocket协议可以支持不同的开发语言和平台，本项目使用的Web前端技术，只要是浏览器支持WebSocket协议，理论上都可以实现与C#服务器进行通讯，无论你的平台是Windows、Mac还是Linux操作系统。

本项目最终的成品界面效果如下图1所示

本项目应用功能介绍。主体界面采用2栏设计风格：左侧栏展示待办事项的操作项，右侧栏展示待办事项列表。待办事项支持基本的增删改查功能，增加和获取列表功能位于左侧栏中，修改和删除操作位于每一个待办事项行右侧。

这个项目使用了3个状态方便用户操作：空闲态、创建态和编辑态。程序启动之后位于空闲态，在空闲态标题编辑框、日期编辑框和状态复选框都是禁用状态，是不可以进行操作的，点击“新建事项”按钮程序便切换为创建态，在这个状态下，以上三个编辑控件都是可以编辑的，或是输入内容，或是选择日期，也可以是切换状态操作，在创建态下，左侧栏的上面按钮显示为“保存事项”，当用户输入合法的信息后，点击这个按钮就会将当前页面上的信息发送至服务器。

第二个状态为编辑态，当右侧栏中显示待办事项列表时，右侧第2列为编辑操作列，用户点击编辑图标，应用程序切换为编辑态，同时，将当前选中的待办事项信息同步至左侧控件中，用户可以按照实际需要修改待办事项的3个信息，这是左侧上面的按钮显示的内容为“更新事项”，与创建态模式下显示的内容有所不同。

图3显示了点击第2行“修改”按钮时左侧栏对应的内容。

对于创建态和编辑态两种情况，当点击了“保存事项”或者是“更新事项“之后，应用程序又会切换为空闲态，左侧栏中的控件又处于了不可编辑状态。

程序的另外两项功能是显示待办事项列表和删除待办事项。显示待办实现列表功能是指从WebSocket服务器上获取当前存在的所有待办事项列表，C# WebSocket服务器目前采用的是内存存储数据，只要是服务器不重新启动，那么创建和编辑的待办事项都会存在服务器端，本应用程序在启动时，不会自动从服务器上获取所有数据，只有点击左侧栏中的下面按钮“获取所有事项“时，才会将待办事项的所有数据展示到页面上。

最后介绍一下删除功能，此应用程序的删除功能为右侧栏中最右侧一列功能按钮，点击“删除“图标按钮立即向WebSocket服务器发送删除这个待办事项的请求，之后本应用接收到来自服务器端的删除消息响应之后会将页面中对应元素删除，由于是个演示WebSocket客户端功能程序，删除操作时并没有添加对应的删除确认功能，实际项目则考虑用户可能出现误操作，删除确认功能是必不可少的一个交互逻辑。

图4中红色下划线标示的按钮分别为“获取所有事项“和”删除“待办事项按钮。

这个项目的功能和界面展示就全部介绍完了，下一篇文章将会具体介绍如何使用Web前端技术HTML、Javascript和CSS实现WebSocket的Web页面客户端，WebSocket技术还在继续中，下一篇文章再见！