1、基于 WebSocket 的教学白板设计 摘要近年来国家对教育更加重视加大力度推动教育事业的发展，现在我们人类随着互联网技术的发展已经进入了高科技信息化时代，国家大力建设信息化教育。网络教学的稳定发展是信息化教育水平的一项重要参考指标，它是一种新的教育模式，它比传统的教育模式更加灵活，充分发挥了教学资源，同时挣脱了传统教学时间和空间上的束缚，增加人们接收教育的机会和途径，推动了国家的教育的发展，也是现在大家比较接受的一种新型教学模式。网络教学的主题离不开教学白板，教学白板系统是一个既能提供学生与老师教学互动，又能提供同学与老师实时交流的教学平台。本次毕业设计使用的是 WebSocket 协议作
2、为核心，完成数据的同步传输，教师和学生两端数据的同步，教学白板上的内容显示同步，通过 JS 技术完成教学白板中各功能的实现和事件触发的控制，同时使用 Java 中 SpringMVC 技术完成各个页面的跳转和相关业务处理逻辑，使用 MySQL 对系统中数据的增删改查，使系统具有更高的适用性。关键词：教学白板； WebSocket 协议；实时同步；消息订阅Based on the WebSocket board design of teachingAbstractIn recent years, the state education pay more attention to intensif
3、y efforts to promote the development of education undertakings, now we human beings with the development of Internet technology has entered the high-tech information age,national construction of information-based education energetically.Network teaching is an important symbol of informatization educ
4、ation. It is a kind of new education model. It is more flexible than the traditional education mode to give full play to the teaching resources. At the same time overcome the closeness and limitation of traditional education.It also increases the chances of people receiving education and promote the
5、 development of national education.Now everyone is receiving a new teaching mode.Depends on the theme of the network teaching teaching whiteboard. Whiteboard system is a can not only provide students to interact with the teacher teaching and to provide students close communication with the teachers
6、teaching platform.The graduation design using the WebSocket protocol as the core to complete data synchronous transmission. Data synchronize on both ends of the teachers and students.Teaching content synchronization of whiteboard with JS technology complete teaching whiteboard realization of each fu
7、nction and event trigger control.At the same time use Java for SpringMVC technology to complete each page jump and related business process logic.It uses MySQL to add and delete data in the system that make system higher applicability.Key words: Teaching whiteboard; The WebSocket protocol; Real-time
8、 synchronization; News subscription;1第一章 绪论1.1 课题研究背景21 世纪社会迅速发展，科学技术蓬勃发展，社会逐步走向信息化。信息化促进了资源的分享，带动了教育事业的迅速发展。如今的教学方式也发生了重大的变化，新的教学模式顺势产生，网络教学逐步兴起。网络教学对传统教学造成了重大的冲击，网络教学现在已经进入了社会的各个领域。传统的教学方式是指在一般的教室中在固有的时间有老师面对面的传授知识，学生被动的接受教育知识。教学资源很有限，老师的资源很大程度上决定了学生的资源广度，教学环境封闭管理人工化。这种教学方式还深深受到时间上，空间上的限制。网络教学是一种传
9、统教学无法比拟的教学方式，它顺应着当今社会互联网技术的蓬勃发展，充分利用了互联网资源实现线上的教学。随着网络教学的发展，当今的教育发生了革命性的变革，人们渐渐的转向线上学习知识。通过网络教学，教师和学生进入一个模拟现实课堂的”网络课堂”中，学生和教师可以进行教学，教师和学生之间可以通过文字，图片，消息等信息实时互动和交流。教学白板是网络教学系统中非常重要的组成部分，他是指利用 Java 和 HTML5 技术建立一个网站，主要服务于学校内的所有学生，为他们很好的提供更多元化的学习环境、更方便复习,预习的学习渠道网站，该平台包括教学区和讨论区，使位于全球不同地方只要登录网站就能在公共的教学白板区讨
10、论问题和交流，其中任何一位已经连接的用户在获取权限的情况下在白板上的操作信息（比如画图，输入聊天信息等）都会实时的传输到其他连接上的用户，展示在他们的界面上，从而体现了教学的互动性，实时性，动态性。1.2 国内外研究现状随着 Internet 突飞猛进地发展，网络教学已经渐渐成为当今教育的主流模式。经过大量研究调查表明，教学白板可以增加学生学习的热情和参与的积极性，还可以提供更多的教学资源。例如，在英国的教学白板对学生教学质量的报告指出：“自从学生使用了教学白板后，学生增加了学习热情，积极地参与教学，主动与老师交互，汇报课程进度，及时解决课程疑问，成绩迅速提高”。现在许多国家许多学校都在大力发
11、展网络教学，充分使用教学白板，让学生在2有网的条件下随时学习相关课程，拓宽了学习渠道，增加了与老师的沟通，教师可以及时知道学生的学习状况。例如，近年来，墨西哥政府为了促进国家教育事业的发展斥资大量资金为他们学校购买大量教学白板技术支持包。在教学白板的应用上，国内外主要集中在教学上的应用，并且国内外主要研究方向是交互式电子白板，而在基于 WebSocket 网络教学白板的设计上相对研究较少，对于网络教学白板的投入和实施相对较少。英国教育通信技术总署在基于教育技术对教学影响的研究报告中陈述：教学白板用于教学优势非常明显，它增加了学生对学习的积极性，让学生更加投入学习，提高学生的交流能力。现在在欧美
12、和东南亚等国家在教育教学中大量投入使用教学白板。1.3 研究的意义本课题主旨研究研究并设计出一个同步网络教学的教学白板，这个教学白板系统提供了新的文化传播途径，带来了学习上的革命，以计算机多媒体和网络通信技术为支撑，以互联网为基础的现代远程教育，打破了时空、地域和对象的限制，能直接有效地伸向社会各个角落，面向社会全体人员，真正实现人人学习、处处学习，时时学习，为每个人提供了更多的接受教育的机会，为人们视线终身学习提供了保障，并有利于教育的均衡发展。另外随着时代的发展，网络教学慢慢将成为教学主流，网络教学会发展的更加迅速。1.4 系统优势和特点教学白板现在用的地方越来越多，涉及的领域越来越广因为
13、教学是每时每刻都存在，互联网技术的蓬勃发展，人们更加专注互联网学习，网络教学中都使用了教学白板系统，就连互联网巨头腾讯也在腾讯 QQ 上增加了白板功能，可想而知教学白板在我们生活的各个领域都充分发挥出了他的优势，从各个方面来说，教学白板优势明显，与人们生活和教育息息相关。教学白板系统其实就是一个网络应用，他是由网页技术开发的，通过WebSocket 协议的消息订阅机制实现数据的实时传输，达到用户数据的实时同步，相比传统教育中的黑板它具有以下几点重大的优势：1.它突破了时间和空间的限制，只要有电脑有网就能实时的学习，而不再受传统教育中时间和空间的限制。2.它突破了传统教学的封闭性，学生可以在教学
14、白板上自由发挥，与老师教学互动，与同学实时交流。33.它突破了传统教学资源的局限性，它可以获取网络教学资源，不在是单单的从老师那里和书本中获取知识。4.它正在逐渐地成为当今教育的主流模式，也更为人们所接受的教学模式。5.它突破了传统教育的管理局限性，它不在需要这么多教育工作者，只需要教师和管理员就可以实现教育的有序性，减少了人力物力，促进社会的可持续性发展。正因为以上这些突出的优势，教学白板无处不在，只要教学不息，教学白板将不会淡出人们视线。它渐渐渗透到人们生活的每一个区域。1.5 系统设计目标教学白板主要用于各个教学领域，主要是为学生提供更多的接受教育的机会和让学生可以不再受时间和空间的限制
15、实时学习知识，同时学生和教师可以实时互动的教学平台，在实现这些功能的前提下，系统设计需要克服以下困难，达到一个理想的教育平台：1.学生和教师在该平台上学习，每个用户都是同步的，保障用户数据的实时性传输和数据传送的完整性。2.学生和教师在该平台上学习，提高教学的方便性，增加教学白板的功能，保证功能的完整性。3.提高系统的交互性和用户的视觉效果，以及用户操作的便利性，提高用户使用的方便性。4.提高系统的灵活性和弹性管理，减少人力和物力的投入，减少资源的消耗。该平台提供用户在线学习和教学使用需要提高系统的稳定性，改善系统的流畅性，使用户使用更加稳定和流畅。1.6 内容结构第一章是绪论。第二章是系统设
16、计的技术的相关背景，这部分将介绍系统设计中用到的相关技术的总结。第三章是系统的需求分析部分包括性能上的需求分析，功能上的需求分析，以及系统维护上的需求分析。4第四章是系统的概要设计部分，这部分将概括性的介绍本系统的设计思路和方法。第五章是详细设计部分，这部分将详细介绍系统在设计时的思路和设计方法以及在设计系统时遇到的困难和解决方案。第六部分是系统开发完后的最关键的一步，它将真实反应系统的安全性和稳定性，找出在开发中遗落的技术死角和开发时的偶然错误。第七章是设计完成本系统后对系统的总结、对自己在设计时的总结，以及对自己未来的就业规划的展望的总结。5第 2 章 相关技术2.1 后台技术后台功能的实
17、现主要依靠 Java 技术，涉及的主要技术有：JSP，JavaBeen，SpringMVC。2.1.1 JSP 技术JSP 全名是 Java Server Page，JSP 是基于服务器编程，它用于展示用户界面，显示后台提供的内容，它在传统的 HTML 页面中嵌入了响应后台的 Java 代码因此它是动态的而 HTML 是静态的。JSP 可以动态加载后台发送的内容信息。它具有很多技术优点，它是支持多种平台的，可以在任意平台下部署系统。它支持很多不同的基于服务器的组件。JSP 的语法中添加了对 JSP 动作支持的 XML标签，XML 很容易扩展，易于维护因此 JSP 也具有良好的扩展性，在编码中可
18、以根据需求进行项目代码的扩展。2.1.2 JavaBeanJavaBean 是一种对对象数据进行封装的技术，一个类具有很有属性，当在不让外界知道这个类的数据结构类型时，可以采取 JavaBean 对类的属性进行打包，它通过使用 set 和 get 方法把对象的属性进行设值和取值，然后结合内部的JSP、Servlet 技术来使用这些对象。它是由 Java 语言构成的因此他就有跨平台的特性。它易于编写和维护可以在不同的环境下运行并且不需要再次编译。2.1.3 SpringMVCSpringMVC 框架是 Java 技术中一种应用非常广泛的框架，它通过 Java 反射机制集成了由后台响应前台的一套结
19、构，它具备 Spring 框架的所有特性，在这基础上简化了相关的设置，使结构趋向于简单化。当用户发送一个请求时，他首先到达的目的地是 Spring 的 DispatcherServlet，由它分配用户的请求给控制器结构部件进行处理，控制器对用户的请求彻底处理成功后，此时需要携带一些数据给浏览器用于显示，如果没有视图就在浏览器里显示时很不友好的，因此需要指定视图来显示后台返回的数据。62.2 前台技术前台技术主要使用了 HTML5、JQueryUI 框架等技术。2.2.1 HTML52.2.2 JQueryUIJQueryUI 其实就是在 JQuery 的基础上加入了底层用户交互、动画、特效和可
20、更换主题的可视控件，它提供了一些常用的界面元素比如鼠标的点击事件，控件的拖放，控件的大小控制等。使用它可以很方便的写出交互性很好地 web项目。它具有以下一些特点：1.我们最喜欢的的就是免费，它是开源和免费的，对于开发人员来说这绝对是福音，我们可以查看源码来解决开发中遇到的问题。2.兼容性很好，开发人员非常头痛浏览器兼容问题，它兼容现在所有主流的浏览器很好地解决了兼容问题。3.简单实用，轻便快捷，减少了带宽消耗提高了打开网页的速度。4.美观多样，集成了很多丰富的动画效果，让页面效果更佳。5.国际化，它集成了 40 多种语言包（包括汉语）易于不同肤色的开发人员使用，促进了技术的国际化。2.3We
21、bSocket 技术本系统主要的难点之一在于数据的实时传输，为了达到实时传输本系统采用了 HTML5 新出的一项协议即 WebSocket 协议。 WebSocket 协议是一种基于http 请求的实现双向通信的新协议，它跟 Socket 的长链接很像，但又有很大的不同。WebSocket 协议当客户端断开链接后不需要客户端和服务器端再次发起请求，在使用量很大的情况和服务器交互负载量很大时，该协议大大减少了消耗（主要是带宽），同时他能实现实时通讯，数据实时传输。使用 WebSocket协议时客户端和服务器端交互时序图 2-1 所示：7图 2-1WebSocket 协议时客户端和服务器端交互时序
22、图2.4 数据库技术本系统采用 MySQL 数据库，他是中型的关系型数据库，他的最大特点是开源，加上其速度快、可靠性高、适应性强易于使用，非常适合我们这些中型系统。它具有以下几点特性：1.开源，不需要付费。2.可移植性，可以在不同的平台下工作3.支持多线程，让 cpu 的资源得到充分的利用4.有效查询速度快5.支持大型的数据库6.支持多种存储引擎2.3 JavaScriptJavaScript 是一种基于 web 页面的脚本语言，它广泛用于 web 项目的客户端，本毕业设计中系统的大部分功能通过 JavaScript 来实现的，它让系统的稳定性和运行效率都得到了很大的提升。它符合面向对象的设计
23、规范，它比较简便，跨平台，不依赖用户使用什么样的服务器，只要浏览器支持就可。很受开发人员的依赖，他能减少服务器的负担。最关键一点是他是动态的，它是采用事件驱动，他可以对用户触发的事件设置监听作出相应。在本系统中每个操作都离不开鼠标事件，在系统的网页中每个功能基本都设置了鼠标监听事件，通过 JavaScript 来响应用户的点击事件然后实现系统的每个功能，正因为它能减少服务器的负担才能让系统在多人操作时能稳定运行。8第 3 章 需求分析3.1 功能需求1.白板区主要用于教学，为用户提供一个模拟的教学课堂。其主要功能有：（1）画笔的颜色、线条粗细等控制。（2）在白板区可以随意画轨迹，画基本的常规图
24、形（矩形、圆等）（3）画键盘输入的汉字，包括设置字体的大小和颜色（4）保存图形到本地2.讨论区主要用来学生和老师在课堂上进行教学交流，同学和同学之间也可以互动，用户可在该区输入交流的内容然后发送到每一个同一门课程的在线用户，达到共同交流，因此具有以下一些功能:（1）在线用户列表的加载和更新（2）讨论内容的发送和接收3.白板权限控制（1）教师有强制取得白板控制的权限。（2）教师释放权限，其他学生可按竞争选取。（3）学生在教师释放权限后，可以通过举手获取权限，谁先抢到权限就由谁来答，并且等抢到的用户停止回答时别的学生可以再次抢取回答的权限进行作答。（4）教师为授课教师具有教师权限否则只能获取学生权限4.后台管理主要包括用户信息管理和课程信息管理（1）用户信息管理主要包括用户信息的则增删改查，管理员可以对学生和教师的信息进行修改，教师的账号信息只能由管理员来添加，不允许自己注册。（2）课程信息管理主要是对课程信息的增删改查，它可以修改已经发布的课程信息，同时也可以发布课程信息，它对课程信息的操作将影响用户的选课列表。
