计算机网络课程设计报告-基于WebSocket 的网页聊天室.pdfVIP

课程设计报告 课程名称：计算机网络 设计题目：基于WebSocket的网页聊天室 专业名称：软件工程 班 级：2012240601 学 号：201231050127 学生姓名：万继龙 2015年7月 7 日 目录 一、概述2 1.1 设计目的：2 1.2 设计内容：2 1.3 设计要求：2 二、设计任务分析（需求分析）2 1. 用例分析：2 三、总体设计3 四、程序实现5 五、心得与体会5 参考文 6 致谢6 Page1of7 一、概述 1.1 设计目的： 为了增加聊天的乐趣，借机学习Node.js和WebSocket，并加深对网络的理解。 1.2 设计内容： 利用Node.js 作为服务器，搭建的一个网页聊天室系统。 其中用到了 socket.io，它封闭了WebSocket 的API，可以方便调用。 express 是一个可以帮你快速搭建Node 程序的框架。 1.3 设计要求： 及时响应用户登录，及消息、图片、表情的发送，并具备一定的容错 性，如上传过大的文件。 二、设计任务分析（需求分析） 1. 用例分析： 用户有发送文字，任意颜色的文字，发送图片，发送表情的需要。如图(1) 所示： 图(1)：用例分析 Page2of7 三、总体设计 整体结构如图 (2)所示： 图(2)：工程结构  其中node_modules 是工程所依赖的模块，为自动生成。 express 是快速构建Node.js 程序的框架； socket.io 封装了WebSocket 的API。  package.json 是整个工程的描述文件，类似于 Java Web 工程中 的 web.xml，非常重要。  README.md 是说明性文件，类似以前的README.txt。  server.js 保存了服务器端代码。  www 目录是客户端部分，其中js 目录中保存了客户端逻辑代码，工 程绝大部分都在这里。  系统中还有一些 “彩蛋”，期待你的发现！ 系统交互过程如图 (3); Page3of7 图(3)：时序图 系统部署如图 (4): 图 (4)：部署图 Page4of7 四、程序实现 1) 发送表情（利用正则表达式匹配输入框中的表情对应的文字，转换为img 标签）： while (match = reg.exec(msg)) { emojiIndex = match[0].slice(7, -1); i (emojiIndex totalEmojiNum) { result = result.replace(match[0], [X]); } else { result = result.replace(match[0], img class=\emoji\ src=\../img/emoji/ + emojiIndex + .gif\/); } } 2) 发送图片 使用(