基于WebSocket的教学白板设计

摘要教学互动，又能提供同学与老师实时交流的教学平台。本次毕业设计使用的是教学白板上的内容显示同步，通过JS技术完成教学白触发的控制，同时使用Java中SpringMVC技术完成各个页面的跳转和相关业务处理逻辑，使用MySQL对系统中数据的增删改查，使系统具有更高的适用性。BasedontheWebSocketboarddesignofInrecentyears,thestateeducationpaymoreattentiontointensifyeffortstopromotethedevelopmentofeducationundertakings,nowwehumanbeingswiththedevelopmentofInternettechnologyhasenteredthehigh-techinformationage,nationalconstructionofinformation-basededucationenergetically.Networkteachingisanimportantsymbolofinformatizationeducation.Itisakindofneweducationmodel.Itismoreflexiblethanthetraditionaleducationmodetogivefullplaytotheteachingresources.Atthesametimeovercometheclosenessandlimitationoftraditionaleducation.Italsoincreasesthechancesofpeoplereceivingeducationandpromotethedevelopmentofnationaleducation.NoweveryoneisDependsonthethemeofthenetworkteachingteachingwhiteboard.Whiteboardsystemisacannotonlyprovidestudentstointeractwiththeteacherteachingandtoprovidestudentsclosecommunicationwiththeteacher'steachingplatform.ThegraduationdesignusingtheWebSocketprotocolasthecoretocompletedatasynchronoustransmission.Datasynchronizeonbothendsoftheteachersandstudents.TeachingcontentsynchronizationofwhiteboardwithJStechnologycompleteteachingwhiteboardrealizationofeachfunctionandeventtriggercontrol.AtthesametimeuseJavaforSpringMVCtechnologytocompleteeachpagejumpandrelatedbusinessprocesslogic.ItusesMySQLtoaddanddeletedatainthesystemthatKeywords:Teachingwhiteboard;TheWebSocketprotocol;Real-timesynchronization;Newssubscription;1第一章绪论21世纪社会迅速发展，科学技术蓬勃发展，社会逐步走向信息化。信息化促进了资源的分享，带动了教育事业的迅速发展。如今的教学方式也发生了重大的变化，新的教学模式顺势产生，网络教学逐步兴起。网络教学对传统教学造成了重大的冲击，网络教学现在已经进入了社会的各个领域。传统的教学方式是指在一般的教室中在固有的时间有老师面对面的传授知识，学生被动的接受教育知识。教学资源很有限，老师的资源很大程度上决定了学生的资源广度，教学环境封闭管理人工化。这种教学方式还深深受到时间上，空间上的限制。网络教学是一种传统教学无法比拟的教学方式，它顺应着当今社会互联网技术的蓬勃发展，充分利用了互联网资源实现线上的教学。随着网络教学的发展，当今的教育发生了革命性的变革，人们渐渐的转向线上学习知识。通过网络教学，教师和学生进入一个模拟现实课堂的”网络课堂”中，学生和教师可以进行教学，教师和学生之间可以通过文字，图片，消息等信息实时互动和交流。教学白板是网络教学系统中非常重要的组成部分，他是指利用Java和HTML5技术建立一个网站，主要服务于学校内的所有学生，为他们很好的提供更多元化的学习环境、更方便复习，预习的学习渠道网站，该平台包括教学区和讨论区，使位于全球不同地方只要登录网站就能在公共的教学白板区讨论问题和交流，其中任何一位已经连接的用户在获取权限的情况下在白板上的操作信息 (比如画图，输入聊天信息等)都会实时的传输到其他连接上的用户，展示在他们的界面上，从而体现了教学的互动性，实时性，动态性。随着Internet突飞猛进地发展，网络教学已经渐渐成为当今教育的主流模式。经过大量研究调查表明，教学白板可以增加学生学习的热情和参与的积极性，还可以提供更多的教学资源。例如，在英国的《教学白板对学生教学质量的报告》指出：“自从学生使用了教学白板后，学生增加了学习热情，积极地参与教学，主动与老师交互，汇报课程进度，及时解决课程疑问，成绩迅速提高”。现在许多国家许多学校都在大力发展网络教学，充分使用教学白板，让学生在有网的条2件下随时学习相关课程，拓宽了学习渠道，增加了与老师的沟通，教师可以及时知道学生的学习状况。例如，近年来，墨西哥政府为了促进国家教育事业的发展斥资大量资金为他们学校购买大量教学白板技术支持包。在教学白板的应用上，国内外主要集中在教学上的应用，并且国内外主要研究方向是交互式电子白板，而在基于WebSocket网络教学白板的设计上相对研究较少，对于网络教学白板的投入和实施相对较少。英国教育通信技术总署在基于教育技术对教学影响的研究报告中陈述：教学白板用于教学优势非常明显，它增加了学生对学习的积极性，让学生更加投入学习，提高学生的交流能力。现在在欧美和东南亚等国家在教育教学中大量投入使用教学白板。1.3研究的意义本课题主旨研究研究并设计出一个同步网络教学的教学白板，这个教学白板系统提供了新的文化传播途径，带来了学习上的革命，以计算机多媒体和网络通信技术为支撑，以互联网为基础的现代远程教育，打破了时空、地域和对象的限制，能直接有效地伸向社会各个角落，面向社会全体人员，真正实现人人学习、处处学习，时时学习，为每个人提供了更多的接受教育的机会，为人们视线终身学习提供了保障，并有利于教育的均衡发展。另外随着时代的发展，网络教学慢慢将成为教学主流，网络教学会发展的更加迅速。1.4系统优势和特点教学白板现在用的地方越来越多，涉及的领域越来越广因为教学是每时每刻都存在，互联网技术的蓬勃发展，人们更加专注互联网学习，网络教学中都使用了教学白板系统，就连互联网巨头腾讯也在腾讯QQ上增加了白板功能，可想而知教学白板在我们生活的各个领域都充分发挥出了他的优势，从各个方面来说教学白板优势明显，与人们生活和教育息息相关。教学白板系统其实就是一个网络应用，他是由网页技术开发的，通过WebSocket协议的消息订阅机制实现数据的实时传输，达到用户数据的实时同步，相比传统教育中的黑板它具有以下几点重大的优势：1.它突破了时间和空间的限制，只要有电脑有网就能实时的学习，而不再受传统教育中时间和空间的限制。2.它突破了传统教学的封闭性，学生可以在教学白板上自由发挥，与老师教学互动，与同学实时交流。33.它突破了传统教学资源的局限性，它可以获取网络教学资源，不在是单单的从老师那里和书本中获取知识。4.它正在逐渐地成为当今教育的主流模式，也更为人们所接受的教学模式。教师和管理员就可以实现教育的有序性，减少了人力物力，促进社会的可持续性正因为以上这些突出的优势，教学白板无处不在，只要教学不息，教学白板将不会淡出人们视线。它渐渐渗透到人们生活的每一个区域。1.5系统设计目标教学白板主要用于各个教学领域，主要是为学生提供更多的接受教育的机会和让学生可以不再受时间和空间的限制实时学习知识，同时学生和教师可以实时互动的教学平台，在实现这些功能的前提下，系统设计需要克服以下困难，达到一个理想的教育平台：1.学生和教师在该平台上学习，每个用户都是同步的，保障用户数据的实时性传输和数据传送的完整性。2.学生和教师在该平台上学习，提高教学的方便性，增加教学白板的功能，保证功能的完整性。3.提高系统的交互性和用户的视觉效果，以及用户操作的便利性，提高用户使用的方便性。4.提高系统的灵活性和弹性管理，减少人力和物力的投入，减少资源的消耗。该平台提供用户在线学习和教学使用需要提高系统的稳定性，改善系统的流畅性，使用户使用更加稳定和流畅。第一章是绪论。第二章是系统设计的技术的相关背景，这部分将介绍系统设计中用到的相关技术的总结。第三章是系统的需求分析部分包括性能上的需求分析，功能上的需求分析，以及系统维护上的需求分析。第四章是系统的概要设计部分，这部分将概括性的介绍本系统的设计思路和方法。4第五章是详细设计部分，这部分将详细介绍系统在设计时的思路和设计方法以及在设计系统时遇到的困难和解决方案。第六部分是系统开发完后的最关键的一步，它将真实反应系统的安全性和稳定性，找出在开发中遗落的技术死角和开发时的偶然错误。第七章是设计完成本系统后对系统的总结、对自己在设计时的总结，以及对自己未来的就业规划的展望的总结。5第二章相关技术2.1后台技术后台功能的实现主要依靠Java技术，涉及的主要技术有：JSP,JavaBeen,SpringMVC。JSP全名是JavaServerPage,JSP是基于服务器编程，它用于展示用户界面，显示后台提供的内容，它在传统的HTML页面中嵌入了响应后台的Java代码因此它是动态的而HTML是静态的。JSP可以动态加载后台发送的内容信息。它具有很多技术优点，它是支持多种平台的，可以在任意平台下部署系统。它支持很多不同的基于服务器的组件。JSP的语法中添加了对JSP动作支持的XML标签，XML很容易扩展，易于维护因此JSP也具有良好的扩展性，在编码中可以根据需求进行项目代码的扩展。2.1.2JavaBeanJavaBean是一种对对象数据进行封装的技术，一个类具有很有属性，当在不让外界知道这个类的数据结构类型时，可以采取JavaBean对类的属性进行打包，它通过使用set和get方法把对象的属性进行设值和取值，然后结合内部的JSP、Servlet技术来使用这些对象。它是由Java语言构成的因此他就有跨平台的特性。它易于编写和维护可以在不同的环境下运行并且不需要再次编译。2.1.3SpringMVCSpringMVC框架是Java技术中一种应用非常广泛的框架，它通过Java反射机制集成了由后台响应前台的一套结构，它具备Spring框架的所有特性，在这基础上简化了相关的设置，使结构趋向于简单化。当用户发送一个请求时，他首先到达的目的地是Spring的DispatcherServlet,由它分配用户的请求给控制器结构部件进行处理，控制器对用户的请求彻底处理成功后，此时需要携带一些数据给浏览器用于显示，如果没有视图就在浏览器里显示时很不友好的，因此需要指定视图来显示后台返回的数据。2.2前台技术前台技术主要使用了HTML5、JQueryUI框架等技术。62.2.1HTML52.2.2JQueryUIJQueryUI其实就是在JQuery的基础上加入了底层用户交互、动画、特效和可更换主题的可视控件，它提供了一些常用的界面元素比如鼠标的点击事件，控件的拖放，控件的大小控制等。使用它可以很方便的写出交互性很好地web项目。它具有以下一些特点：1.我们最喜欢的的就是免费，它是开源和免费的，对于开发人员来说这绝对是福音，我们可以查看源码来解决开发中遇到的问题。2.兼容性很好，开发人员非常头痛浏览器兼容问题，它兼容现在所有主流的浏览器很好地解决了兼容问题。3.简单实用，轻便快捷，减少了带宽消耗提高了打开网页的速度。4.美观多样，集成了很多丰富的动画效果，让页面效果更佳。5.国际化，它集成了40多种语言包(包括汉语)易于不同肤色的开发人员使用，促进了技术的国际化。本系统主要的难点之一在于数据的实时传输，为了达到实时传输本系统采用了HTML5新出的一项协议即WebSocket协议。WebSocket协议是一种基于http请求的实现双向通信的新协议，它跟Socket的长链接很像，但又有很大的不同。WebSocket协议当客户端断开链接后不需要客户端和服务器端再次发起请求，在使用量很大的情况和服务器交互负载量很大时，该协议大大减少了消耗(主要是带宽),同时他能实现实时通讯，数据实时传输。使用WebSocket协议时客户端和服务器端交互时序图2-1所示：7图2-1WebSocket协议时客户端和服务器端交互时序图2.4数据库技术本系统采用MySQL数据库，他是中型的关系型数据库，他的最大特点是开源，加上其速度快、可靠性高、适应性强易于使用，非常适合我们这些中型系统。它具有以下几点特性：1.开源，不需要付费。2.可移植性，可以在不同的平台下工作3.支持多线程，让cpu的资源得到充分的利用5.支持大型的数据库6.支持多种存储引擎JavaScript是一种基于web页面的脚本语言，它广泛用于web项目的客户端，本毕业设计中系统的大部分功能通过JavaScript来实现的，它让系统的稳定性和运行效率都得到了很大的提升。它符合面向对象的设计规范，它比较简便，跨平台，不依赖用户使用什么样的服务器，只要浏览器支持就可。很受开发人员的依赖，他能减少服务器的负担。最关键一点是他是动态的，它是采用事件驱动，他可以对用户触发的事件设置监听作出相应。在本系统中每个操作都离不开鼠标事件，在系统的网页中每个功能基本都设置了鼠标监听事件，通过JavaScript来响应用户的点击事件然后实现系统的每个功能，正因为它能减少服务器的负担才能让系统在多人操作时能稳定运行。8第三章需求分析1.白板区主要用于教学，为用户提供一个模拟的教学课堂。其主要功能有：(1)画笔的颜色、线条粗细等控制。(2)在白板区可以随意画轨迹，画基本的常规图形(矩形、圆等)(3)画键盘输入的汉字，包括设置字体的大小和颜色(4)保存图形到本地2.讨论区主要用来学生和老师在课堂上进行教学交流，同学和同学之间也可以互动，用户可在该区输入交流的内容然后发送到每一个同一门课程的在线用户，达到共同交流，因此具有以下一些功能：(1)在线用户列表的加载和更新(2)讨论内容的发送和接收(1)教师有强制取得白板控制的权限。(2)教师释放权限，其他学生可按竞争选取。(3)学生在教师释放权限后，可以通过举手获取权限，谁先抢到权限就由谁来答，并且等抢到的用户停止回答时别的学生可以再次抢取回答的权限进(4)教师为授课教师具有教师权限否则只能获取学生权限4.后台管理主要包括用户信息管理和课程信息管理(1)用户信息管理主要包括用户信息的则增删改查，管理员可以对学生和教师的信息进行修改，教师的账号信息只能由管理员来添加，不允许自己注(2)课程信息管理主要是对课程信息的增删改查，它可以修改已经发布的课程信息，同时也可以发布课程信息，它对课程信息的操作将影响用户的选9本系统主要分为3个角色：学生，教师，··员。(1)学生：学生主要可以在教师释放权限的时候抢取权限进行操作，使用画板功能。(2)教师：教师可以在白板上使用期功能，他能控制教学白板的权限，控制学生的权限，维持课堂秩序。以上权限是教师进入的课程是自己教学的课程，否则则以学生身份获取响应的权限。(3)管理员：管理员主要可以操作用户的信息，可以操作系统已经发布的课程，同时可以发布课程，维护系统的稳定性。当学生和教师都在教学白板系统教学时，应该保证数据传输的实时性和完整性，每个在线的同一个课程的用户所看到的页面必须统一。当新用户进入课程时必须保证他进来时和已经在线的用户保持一致，从而保证系统数据传输的稳定性和实时性。另外当很多用户在使用该白板系统时，必须保证系统的流畅性和稳定性，当一个用户在一个课程中操作时，数据必须顺畅完整的发送到指定的课程中，不能有太大的延迟和系统操作卡顿，从而保证系统的稳定性和健壮性。3.3安全性和维护性需求学生和教师在教学白板上教学时，必须保证数据的安全性，每个课程的数据必须准确的传送到指定的位置，教学白板系统必须保证每一个用户的信息安全包括账号密码安全、用户权限、数据库信息等。教学白板需要易维护，当系统遭到攻击或者奔溃时需要快速解决，让系统处于正常的工作状态中。3.4可行性分析教学白板的技术可行性分析主要在于系统是否能稳定运行，运行速率是否很快来满足用户需求。现在的技术非常发达，计算机的运行速率比以前有很大的突破，完全可以让系统快速的运行，完全能承载整个系统快速运行。还有就是本系统的关键技术在于数据的同步传输，数据传输的快慢和完整决定系统能否稳定运行，然而随着HTML5发布了WebSocket协议，并且已经运用很广泛，技术基础非常雄厚，所以完全可以保证系统设计不存在技术问题。社会可行性分析主要在于人们是否愿意接受本系统，本系统能否给社会带来影响，是否给社会带来便利。能要薄能肥盟能要薄能肥盟随着网络教学模式的兴起，越来越多的人更愿意接受这种模式，它比传统教学模式优势明显。它可以促进我国教育的发展，给人们带来更方便的学习平台，给社会带来巨大的影响。用户用户管理课程信息查调课程信息操伴白板发布课程换作信点教而学生图3-5功能模块图3.5数据库设计表3-1用户表字段名类型及长度是否为空说明否用户登录系统时的账号(主键)否用户在系统中的用户名否登录系统的密码(通过MD5算法加密)否用户所在班级(学生填写真实所在班级，教师则填那个学院)否登录系统用户的角色(1.表示教varchar(20)否在本系统注册账号的时间字段名类型及长度是否为空说明courseid否课程编号(主键)courseNamevarchar(20)否课程名称teachervarchar(20)否授课教师publishTimevarchar(20)否发布课程的时间字段名类型及长度是否为空说明否课程编号varchar(20)否用户账户usernamevarchar(20)否用户名称表3-4历史记录表字段名类型及长度是否为空说明否标号否课程编号否历史记录(当前界面canvas中的内容转化成base64位编码)否历史记录的时间n。班级用户m课程号名课程编号编号发布时间课程n课程秀用户账号彩根据系统E-R图转换成的关系模型如下：用户(账号，密码，用户名，角色，注册时间)在线用户(课程号，用户账号，用户名)课程记录(编号，课程编号，课程数据)第四章概要设计4.1系统总体功能描素4.2系统关键处理流程失败选课列表成功否(刷新)是进入白板否角色判断数据库结束教师并且是授课教师图4-1系统关键处理流程教学白板系统主要包括用户登录模块，选课列表模块，教学白板模块、讨论交流模块，课程记录模块、后台信息管理模块。登录模块：当用户登录白板系统时需要要登录验证，系统通过用户输入的账号和密码与用户注册的信息进行比对，匹配成功则进入选课模块。用户登录模块的流程图如下：否否输入账号和密码选课列表模块：当用户登录成功后进入选课界面，选课为用户选择课程，不同的课程有不同的白板。教学白板模块：当用户选择了课程后，他将进入教学白板模块，该模块为系统的核心模块，教学白板模块提供用户在界面上随意划线，画典型图形，还可以键盘输入汉字，用户在上面画圆或者别的图形，同一个课程的所有用户的界面都会显示所画的图形。同时该模块还添加了控制权限，当老师按下学生交流按钮时学生获得权限可以在白板上操作，当老师按下强制停止时所有学生都无法操作，方便老师控制课堂秩序和在教学和学生与老师的互动。讨论交流模块：该模块提供教师和学生之间的教学交流，方便学生与教师交流学习，可以促进教学质量。课程记录模块：该模块主要记录每个课程教学的历史记录，用户可以登录该系统进入相应的课程企业查看相应的课程记录，方便用户教学。后台信息管理系统模块：该模块提供管理员维护教学白板系统，主要包括用户信息管理模块和课程信息管理两个子模块。用户信息管理模块提供管理员对用户信息的增删改查操作，维持系统账户的安全。课程发布系统主要提供管理发布课程和修改删除课程，发布和删除课程将会改变用户选课列表，修改和删除可以批量进行，方便管理员维护课程，维护系统。4.3.2接口技术外部接口主要使用丁老师的学练原地系统的数据接口，提供用户登录和后台信息管理模块操作的数据。该接口提供了用户个人信息，课程信息。内部接口主要是每个课程在教学过程中的历史记录保存在本地数据库，提供历史记录数据库接口实现用户查询历史记录，方便用户学习。登录模块中登录时输入用户的账号和密码，注册时输入用户账号，用户名，用户班级，验证码。教学白板模块输入鼠标点击事件讨论交流模块输入用户的交流信息。历史记录模块输入鼠标单击事件。后台信息管理模块中登录时输入用户账号和密码，操作用户信息时输入用户账号查询到用户信息进行操作，增加用户时输入用户的账号，用户名，密码，验证码，班级。操作课程信息是输入课程编号，发布课程输入课程号和授课教师。用户登录时当用户输入账号或密码为空时输出账号和密码不能为空。输入的账号不存在时输出账号不存在请注册。输入的账号密码不正确时输出密码错误，输入账号和密码正确则输出跳转页面。教学白板模块输出在页面展示所画的图像。课程记录模块输出的是在页面显示历史记录。后台信息系统输出的是相应操作是否成功。4.3.5系统依赖关系本系统主要依赖老师的学练原地教学系统，需要该系统提供数据接口。4.3.6关键实现技术的描素该系统主要的技术点在于数据的同步，达到没门课程所有用户看到的界面一致，这个关键点解决的技术主要使用了WebSocket协议，它类似于TCP中的长连接，它能实现实时通讯。它在维持长连接时与TCP的不同，它当服务器和客户端断开连接时不需要客户端重新发起连接，这样节省了系统资源，提高了系统的运行速度。例外在设计用户界面时候使用了JQueryUI框架，使界面更友好。第五章详细设计5.1系统主要功能模块介绍1.登录模块用户进入系统时必须要登录才能进去，登录模块是系统的入口，该模块设置了校验，用户登录时输入的用户名和密码校验成功才能进入系统然后使用该系2.选课模块：每门课程都有不同的教学白板，该模块提供用户选择自己所要的课程，进入相应的白板，让系统数据条理化，便于后台保存操作白板时数据。3.教学白板模块：该模块的功能为系统的核心功能，该区域提供了用户教学工具，用户可以在该区域随意划线，画规则图形，显示键盘输入的汉字等功能。另外该区域添加了权限控制，教师可以有效的控制课堂秩序，可以通过控制权限与学生交流，增加课堂的互动，提高学生的学习兴趣。4.讨论交流模块：该模块主要提供教师和学生之间的交流，学生可以和教师互动，解决问题和了解学习进度，同学之间也可以在上面交流，增加学习积极性，相互促进。5.课程记录模块：随着课程有序的进行，每个用户的理解能力和时间安排各有不同，用户可以在查看课程记录信息来加深课程的理解和课程进度的同步，该模块主要解决上述需求。6.后台信息管理模块：该模块主要提供管理员维护系统，管理员可以在该模块中增加用户信息和批量修改用户信息，同时可以在该模块发布课程和批量修改课程信息。5.2各模块的详细设计该模块为用户进入系统的屏障，用户登录时输入用户账号和密码，通过在数据库中记录用户注册时的填写的用户账号和密码等信息(用户账户为学生的学号),用户登录时通过访问数据库查询是否存在相关记录来校验用户是否成功登录系统，同时在校验流程中使用AJAx技术进行异步校验账号信息的合法性比如账号的长度、账号的是否为纯数字、账号是否已经注册，校验成功后台将返回成功信息并跳转页面到选课界面。校验失败页面提示错误信息。2.模块流程图注册码3.模块实现的算法发送给后台，服务器对用户信息校验的结果发送到前台，前台页面通过比对后台ajax.open("GET","check?userid="+userId+"&password="+passWor//分析响应varstr=$.trim(c);{document.getElementById("p").innerHTML="<fontcolor='red'>"{document.getElementById("p").inne}document.getElementById("p").inne}图5-1账号信息校验客户端点击登录后发送账号信息给服务端，服务端查询数据库中是否存在该正确性，登陆成功跳转到选课界面(listCourses.jsp),失败则继续登录，实现的代码如图5-2。ajax.open("GET","checkpass?userid="tuserId+"8password="+passWordr"",false);//引础口{)()window.location.href="listcourses?userid="+userId+"";)图5-2用户登录带户卷：轻松姿态无畏前行带户卷：检液图6-1系统登录界面效果图4.问题和解决的办法本模块涉及的查询数据库的方法全部使用了SpringJdbc,当调用它的queryForObject()方法时如果记录不存在时，返回的是异常并不是空对象。所以无法使用这个方法来验证用户记录是否存在。解决的办法是使用了SpringJdbc的另一个方法query()通过判断该方法的list长度是否大于一来确定用户账号信息是否存在，实现登录模块的验证。该模块为用户登陆成功后进入的模块，整个白板系统有很多课程，为了方便后台数据的统计，为每门课程设置了一个教学白板，每个课程的信息将会分别进行保存。通过访问后台查询数据库中的course表，获取表中的课程，显示在页面上。后台模块发布了或删除课程都会改变选课列表中课程的数目。否否是白板系筑界面是否选择3.模块实现的算法本模块主要的算法是通过SpringJdbc查询数据库中course表的所有课程数据并将查询到的数据通过SpringMvc的Controller把数据返回到前台页面。服务端获取数据库中course表的所有课程信息的代码如图5-3。/***/publicStringcourseList(@RequestParam("userid")StringuserId,Modelm)List<Course>clist=DataLog.findAllCourse();try{e.printStackTrace();m.addAttribute("user",user1); }图5-3获取课程列表客户端在listCourses.jsp中把服务端返回的数据使用HTML的table标签把后台返回的课程数据通过循环显示课程列表供用户选择代码如图5-4。<table><tdwidth=300align=center><table><ahref='play?courseId=${course.courseId}</a></td></td></tr></c:if></c:forEach>图5-4显示课程列表点教号金革PN体：参用图5-4显示课程列表效果图我在该模块的设计的时候思考了许久，作为核心模块，它的设计将影响系统的健壮性，使用jsp和css把界面写出。该模块具有绘制各种图形和文字功能，选择线条的粗细和颜色。使用js写出颜色选择器供颜色选择。该模块需要让用户在上面操作的数据同步到每一个在本课程的白板中，实现在线同步，因此使用了HTML5新出的WebSocket协议用于服务器和在线用户的客户端连接，使用它的消息订阅机制实现数据实时传输。比如当我们选择画线时，我把这个操作定义为命令一，当用户开始在画板上画线时，按下鼠标，此时通过WebSocket的消息订阅机制把鼠标点下时的位置信息，线条的粗细值和线条颜色值发送到后台，然后转发到每一个连接在一起的客户端，客户端订阅到了发过来的消息就会去执行画线的方法，把图形在每一个订阅的客户端上显示出来，实现数据的实时同步。其他的功能都是使用这种方式来实现。本模块还有一个重要的点，就是如何控制白板的操作。整个白板中授课教师具有总控制权，他可以通过点击学生回答按钮释放权限，此时学生可以举手竟取获取操作权限，使用白板上的功能，它同时可以点击停止回答按钮强制占有权限，此时学生失去权限不能操作白板只能观看教师操作。2.模块流程图是是操作白板功能咨授课教师强制停止是不能换作白板功能授课教师否授课教师释否块3.模块实现的算法(1)服务器与每个客户端连接的主要代码通过JavaSpring对WebSocket的支持使用JavaScript来进行连接。SocketJS和Stomp是JavaScript对WebSocket通信进行封装方便使用的js库。客户端通过服务端注册的连接点(/mywq/teach,其中mywq为项目名称，teach为连接点)发起连接代码如图5-5。stompClient.connect({},fun图5-5客户端发起连接服务端通过resisterStompEndpoints)方法配置和注册连接点，调用configureMessageBroker()方法设置消息代理，其中enableSimpleBroker)设置订阅消息的地址，这里我设置的是“/topic”,在系统订阅消息都需要使用这个地址作为前缀，setApplicationDestinationPrefixes()方法设置发布消息的地址前缀，本系统中我设置的是“/broker”,在页面中需要发布消息时必须以此为地址前缀才能建立通信。配置好了连接点和代理地址后等待客户端发起连接，如果连接点一致则连接成功，即可进行通信，代码如图5-6。//设置消息代理，也就是页面上用js来订阅的地址，也是我们服务器往WebSocket端接收js端发送消息的地址//这里设置的simplebroker是指可以订阅的地址，也就是服务器可以发送的地址publicvoidconfigureMessageBroker(MessageBrokerRegistryconfig){//System.out.println("configureMessageBroker");config.enableSimpleBroker("/topic");//config.enableStompBrokerRelay("/topic");}//注册消息连接点//添加这个Endpoint,这样在网页中就可以通过websocket连接上服务了publicvoidregisterStompEndpoints(StompEndpointRegistryregistry){StompWebSocketEndpointRegistrationr=registry.addEndpoint("/teach");SockJsServiceRegistrationm=r.withSockJS();}图5-6服务端注册连接点设置相关信息(2)连接成功后每个客户端都与服务器建立连接，服务器统一转发数据。当用户进入白板系统时首先浏览器会发送AJax请求给服务器，并把服务端返回的数据库中该课程的最后一条历史记录数据调用Canvas的drawlmage方法显示到页面上。客户端的主要代码如图5-7所示：//分析响应ajax.open("GET","getData?courseId="+courseId,//分析响应varc=ajax.responseText;if("noRecord"!=str){tion(){ctx.drawImage(image,0,0,image.width,image.height,0,0,canvasWidth,canvasHeight);}}}图5-7用户进入系统时把最近一条记录加载到页面服务端查询数据库中的该课程的最近一条数据并返回给客户端代码如图//获取历史数据查看课程记录response.setHeader("ContentType","text/plain");}catch(IOExceptione){e.printStackTrace();}//查找最近的一条记录List<History>list=if(list.size()==0){图5-7服务端查询最近一条记录并返回(3)白板上的画标准图形利用了WebSocket的消息订阅机制，客户端发送画标准图形的消息到服务端，服务端转发到每一个与它建立连接的客户端，客户端订阅到了服务器端返回的数据后，调用画标准图形的算法就可以实现每个客户端页面同步。客户端鼠标按下时使用服务端配置的发布消息前缀地址(“/broker”)加上不同内容的地址(“/downinfo”)把鼠标按下时初始位置和画笔的颜色和宽度等消息发布出去，代码如图5-8。contextcontext_bak.beginPath();flag=true;flag=true;//获得cVS元素相对于浏览器圆点的坐标var_box=canvas.getBoundingClientRect();varx0=e.clientX-_box.left*(canvas.width/_box.width);*(canvas.width/_box.width);//获取画笔颜色varborderwidth=$("#penWidth").val();//获取画笔的宽度var//发送初始值vardownInfo="${course.courseId}!"+x0+","+y0+","+bordercolor+","+borderwidth+","+backgroundColor;stompClient.send("/broker/downinfo",{},JSON.stringify(downInfo));1J图5-8客户端发送初始位置和画笔样式客户端使用配置好的订阅地址(“/topic/downinfo”)订阅鼠标刚按下时位置和画笔粗细和颜色数据然后把得到的数据设置为用户在白板上操作的初始值，比如画笔的颜色和宽度等。用户执行操作时这些参数将使用，代码如图5-9。//订阅鼠标刚按下时位置和画笔粗细和颤色数据stompClient.subscribe('/topic/downinfo${course.courseId}',function(mymessage){m=JSON.parse(mymessage.body);.split(",");borderWidth=p[3];backgroundColor=p[4];context_bak.strokeStyle=borderColor;context_bak.lineWidth=borderWidth;图5-8客户端订阅到消息为相关变量赋值白板功能基本都是通过发布canvas的画笔位置消息，用isShape区别当前的vary=e.clientY-_box.top*(canvas.height/_box.height);varchessinfo="${course.courseId}!选择的白板功能。//发送随意划线时相关参数信息functionsendLineInfo(e){//发送随意划线时相关参数信息e=ellwindow.event;varisShape=shape;var_box=canvas+","+isflag;stompClient.send("/broker/chessinfo",{},JSON.stringify(chessinfo));}图5-9客户端发送白板操作信息客户端订阅到服务端返回的消息并分割，依据shapes的值调用相应的代码实实现白板的功能，执行代码如图5-10。stompClient'/topic/courseinfo${course.courseId}',function(mymessage){=m.varx=p[0];varz=p[3];//随意划线if(z=="true"){context_bak.stroke();context_bak.beginPath();.moveTo(x,y);}1j1图5-9客户端订阅到白板操作消息执行相关算法服务端接收到客户端发送的鼠标刚按下时初始位置和画笔的颜色和宽度的消息，服务端调用Spring的消息模板类template的convertAndSend方法转发给同一课程每个连接的客户端。转发消息代码如图5-10。//鼠标按下时的起始位置publicvoiddowninfo(Stringmess)throwstemplate.convertAndSend("/topic/downinfo"+zh,xy);}图5-10服务端转发鼠标刚按下时数据消息服务端订阅到客户端发送的画标准图形消息，服务端转发给相应的课程的每个客户端。转发消息代码如图5-11。//白板功能操作时数据@MessageMapping("/chessinfo")publicvoidinfo2(Stringmess)throwsException{intp1=mess.indexOf("!");Stringzh=mess.substring(0,p1);template.convertAndSend("/topic/courseinfo"+zh,xy);}图5-11服务端转发鼠标刚按下时数据消息(4)由于白板上的数据需要实时同步，数据的传输必须快速有序，还需要保证系统使用的流畅性。白板上的数据大小必须有限，不能通过文件等来传输，鉴于这种场景，我在设计时白板上的图形通过转成64位Base码来存储和传输。当图形绘制完毕时将蒙版Canvas上的图像转成64位的Base编码发送给每个连接的用户然后在Canvas上显示。客户端订阅到64位Base编码消息后转化图像显示在页面上实现代码如图5-12。//订阅图像消息stompClient.subscribe(m'/topic/dataInfo${course.courseIdmimage.src=m;image.src=m;image.width,image.height,0,0,canvasWidth,canvasHeight);clearContext();}图5-12客户端把图像加载到页面上4.问题和解决方案在白板的画图功能上使用Canvas和JS技术来实现，由于画标准图形时需要实现拖放效果，而Canvas中是没有异或的不能直接实现图形大小的拖放绘制。解决此问题开始时我的思路是在Canvas中添加一块临时区域，通过在临时区域里绘制图形，然后当鼠标弹起时，隐藏该区域在Canvas中绘制图形，做出的效果是图形会闪动，而且会影响其他的操作。经过思考和探索发现使用两个Canvas位置重叠，通过把数据转化成64位的base编码然后在另一块画板上展示出所画的图形达到拖放效果。另外本功能还有一个关键的地方在于当用户进入时不同时间段进入白板时应该让页面和在线页面显示的一样，这样才能同步。解决此问题的方案是我让他在加载页面时异步访问后台数据库把该课程的记录的最后一条查询出来显示到页面即可达到效果。5.2.4讨论交流模块1.模块设计思路该模块设计的目的主要是为了让教师和学生更好地交流和互动，了解教学进度，互相促进学习。讨论交流主要是把消息发送给给一个在线用户，使用WebSocket协议的消息订阅机制就能完成消息的群发功能。然后在线用于列表的实现也是个难点，传统的使用session但此处藐视不太行，于是就使用了这套方案，在用户点击刷新或者点击关闭浏览器时触发响应事件，给后台发送消息让后台把该条记录删除，当界面重新加载时重新把记录添加到数据库并且通知每个在线用户刷新他们的在线列表。这样在线列表就实现了同步。2.模块实现的算法(1)讨论信息群发通过客户端发送讨论内容到服务端，服务端转发到客户端，然后客户端把内容加载到页面上。客户端发送讨论内容代码如图5-13。varuser=document.getElementById('user').stompClient.send("/broker/monitor",{},JSOn.stringify(message));}}varuser=document.getElementById('usvaruser=document.getElementById('us.send("/broker/monitor",{},JSON.stringify(message));}}}图5-13客户端发送讨论内容服务端转发讨论内容代码如图5-14。//Thread.sleep(1000);//simulateddelay}图5-14服务端转发讨论内容(2)当用户刷新页面或点击关闭页面时会把用户的账号异步发给服务端再把记录删除代码如图5-15。//用户退出后删除在线用户列表记录}varcourseId=${course.courseId};,false);}图5-15客户端离开系统时后台删除该条记录把更新后的在线用户列表加载到页面上这样就实现了用户在线用户列表的刷新和同步。5.2.5课程记录模块1.模块设计思路传统教学中当学生有事离开教室，教室课程记录基本回顾不了，严重影响学习效率，该模块主要解决了上述问题，当用户有事离开课堂后，他可以进入该系统找到该课程的课程记录继续学习，这样就可以促进学习，避免因个人原因影响学习进度。该模块设计主要思路主要从前面模块中存入数据库的课程信息中查询该课程的课程信息，使用SpringJdbc获取课程信息通过canvas展示在界面，用户可以查阅课程信息进行学习，这样保障了系统的实用性。2.模块实现的算法课程记录消息存放在data数组中，点击页面上的上一张时，改变data数组下标值获取数组中课程记录数据，通过Canvas调用drawlmage()方法把记录数据描绘到页面上，当到了最前的记录时(index下标等于数组长度),把上一张按钮设置为不可点，代码如图5-16。//显示前一张if(index<data.length)document.getElementById('btn2').disabled=false;index=data.length;document.getElementById('btn1').disabled=true;}clearContext();ctx.drawImage(image,0,0,image.width,image.canvasWidth,canvasHeight);}}图5-16课程记录加载和显示前一张点击页面上的下一张时，更新页面的课程记录信息，当点击按钮时是最后一条记录(data数组下标index值为零)则把下一张按钮设置为不能点击，代码如图5-17。//下一张functionnext(){if(index>-1){index=index-1;document.getElementById('btn1').disableddocument.getElementById('btn2').disabled}clearContext();=false;rnload=(){ctx.drawImage(image,0,0,image.widcanvasWidth,canvasHeight);}图5-17课程记录加载和显示后一张5.2.6后台信息管理模块传统教学中，每门课程信息都有学校统一安排，管理模式单一，投入的人力资源多，当人数达到一定时，很不利于管理，这些弊端特别突出。本系统设计时充分考虑了这些因素，让系统管理方便，使用灵活。本系统通过管理员来管理整个系统，他可以对用户信息进行管理，保障用户信息的正确性和安全性，同时他还可以维护课程信息，是整个系统的课程变得灵活，用户可以根据后台发布的课程信息进行选择课程，让课程更加具有广泛性。后台信息还具备批量处理功能，有利于维护系统，减少投入成本。(1)发布课程信息把前台请求的参数(课程名，教师名)以及当前系统时间调用写好的数据库工具类DataLog的insertCourse()方法插入到数据库课程表中，代码@RequestMapping(valupublicStringdoPublish(@RequestParam("courseStr")@RequestParam("teacherStr")StringteacherStr,Modelm){List<Course>cList=DataLog.findAllCourse();m.addAttribute("courseList",cList);}图5-18发布课程(2)批量修改课程信息，把客户端的请求参数(要修改的那些课程的id,课程分割然后依次更新数据，代码publicStringdoUpdate(@RequestParam("requestStr")StringrequestStr,Modelm){StringcourseStrString[]publishTimes=pu{course.setCourseId(Integer.valu}}图5-19批量修改课程信息第六章系统测试结果及其分析当用户未注册登录系统时此时界面提示如图6-2所示轻松姿态无畏前行非习用将在源注接注册图6-2用户未注册登录系统时提示当用户输入密码错误时系统界面提示如图6-3所示图6-3用户登录时密码错误提示6.2选课模块测试登录成功后进入选课界面如图6-4所示*线生毛工预在解村李州Amnnlt手期图6-4选课界面选课后进入白板系统界面如图6-5所示线条颜色：填充颜色：工具图形一橡皮清空矩形橡皮清空矩形D圆形画笔保存汉字■填充矩形道充圆形保存汉字图6-5白板界面在白板区绘制填充矩形界面如图6-6所示剩学白教线条设置线条设置-图形一橡皮一直线o橡皮一直线o汉字画笔保存字体样式Arial■道充矩形○填充圆形B图6-6白板上绘制填充矩形在白板区绘制汉字界面如图6-7所示教学构断线条设置线条设置填充颜色：字体设置清空画笔密保存直线清空画笔密保存8欢迎进入白板系统图6-7白板上绘制汉字6.4讨论交流区模块测试李明血图6-8讨论区用户进行输入信息进行交流如图6-9,6-10所示：李明自薅李明图6-9在线用户交流在线用户李明李明图6-10在线用户交流6.4权限控制模块测试用户进入白板系统，如果用户是该课程的授课教师则有控制白板的权限，如果不是则与学生的权限一样，只有当教师授权给学生，然后学生抢答获取权限才能操作白板。效果如6-11,6-12所示：学生回答强制停止学生回答强制停止在线用户在线用户肖或课程记录图6-11学生用户进入系统时权限谢论区谢论区在线用户在线用户图6-12授课教师进入系统时权限授课教师点击学生回答时，学生可以通过举手回答获取权限，然后操作教学白板，效果如图6-13所示：求矩形的面积矩形的面积是5*4=20@作者：肖斌@邮箱：850760046@字体设置Arial一直线0汉字画笔保存线条设置图6-13学生获取权限后操作白板6.4课程记录模块测试点击课程记录就会弹出最近一条记录显示在页面上，可以点击上一张和下一张来查看课程记录，效果如图6-14所示：下一张下一张课程记录上一张上一张图6-14课程记录第七章结论和展望7.1毕业设计的总结经过几个月的折腾终于把毕业设计写完了，从选题开始就一直在琢磨教学白板系统如何设计更合理，如何设计才能让功能实现，并使系统能稳定运行。进过几周的思考于是开始进行制定计划，与老师沟通确定设计系统使用什么技术。最后确定使用JavaScript、WebSocket,JQuery、UISpringMVC、和Canvas来完成本系统。虽然大学期间学习过一段时间的