基于HTML5的在线答疑系统的白板设计与实现

摘要HTML5是下一代互联网的Web标准，和以前的版本不同，HTML5并非仅仅用来表示Web 内容，它将使Web 进入一个成熟的应用平台，在这个平台上，视频、音频、图像和动画，以及同电脑的交互都被标准化。

随着Adobe宣布停止Flash移动版开发，不少人预言HTML5的发展将给移动互联网产业带来革命性的深刻变化。

作为新一代的网页语言，HTML5跨平台的支持得到不断增强，智能手机的迅速普及加上资费和网络速度的逐渐松绑，也为HTML5技术提供了良好的发展环境。

这其中有“Web 的TCP”之称的WebSocket 格外吸引开发人员的注意。

WebSocket 的出现使得浏览器提供对Socket 的支持成为可能，从而在浏览器和服务器之间提供了一个基于TCP 连接的双向通道。

Web 开发人员可以非常方便地使用WebSocket 构建实时Web 应用，开发人员的手中从此又多了一柄神兵利器。

本文首先分析国内外研究现状，然后介绍本文用到的关键技术的介绍以及本文实例开发中的环境配置的方法，接下来会详细说明如何利用WebSocket技术实现一个简单的在线聊天室，并对当中遇到的问题进行分析与解决。

本文的创新点是利用最热门的HTML5技术WebSocket结合C#的后台实现做一个简单的聊天室，从而更加清晰地阐述HTML5的优缺点，并且提出一些应该注意的问题和解决方法，以给后来者一些经验和教训。

【关键词】HTML5 WebSocket C# 聊天室ABSTRACTHTML5 is the next generation of Internet Web standards, and com in contrast with the previous version, HTML5 is not only used to represent Web content, it will enable the Web into a full-fledged application platform, in this platform, video, audio, images and animations, as well as interaction with the computer are standardized. As Adobe announced the end to support the Flash mobile version of the development, many people predicted the development of HTML5 mobile Internet industry will bring profound changes in the revolutionary. As a new generation of web language, HTML5 cross-platform support has been growing, the rapid adoption of smart phone plus tariff and network speed gradually relaxed, and also provides a good environment for the development of HTML5 technology.The WebSocket which said of the Web's TCP is especially attractive to the attention of developers. The WebSocket appear the browser support for Socket possible, thus a two-way channel based on the TCP connection between the browser and the server. Web developers can very easily use the WebSocket to build real-time Web applications, in the hands of developers from the addition of a two-edged magic weapon.First of all, I describes the configuration of the environment in the introduction of key technologies used in this article, as well as examples of the development of this article, the next will explain in detail how to use the WebSocket technologya simple online chat rooms, and among the problems encountered in the analysis and solution.The innovation of this paper is the use of the most popular HTML5 technology behind the scenes to make a simple chat room WebSocket combination of C #, in order to more clearly set forth the advantages and disadvantages of HTML5, and raise some issues that need attention and solutions to give newcomersexperiences and lessons learned.【Key words】HTML5 WebSocket C# Chat Room目录前言 (1)第一章HTML5WebSocket聊天系统概述 (2)第一节研究内容 (2)第二节研究意义 (2)第三节研究现状和发展趋势 (2)第二章HTML5相关技术及简介 (4)第一节HTML5部分新特性 (4)一、HTML5新标签 (4)二、HTML5 新API (4)三、HTML5的优点 (4)第二节HTML5WebSocket简介 (5)一、Polling和Comet (5)二、目前技术的本质 (6)三、HTML5 WebSocket性能优势 (6)四、WebSocket 规范 (7)五、浏览器支持 (10)第三节KindEditor应用 (11)一、KindEditor简介 (11)二、KindEditor特点 (11)三、KindEditor使用方法 (12)四、jQuery EasyUI (13)第三章开发运行环境及配置 (14)第一节开发工具 (14)一、Microsoft Visual Studio 2010 (14)二、语言及平台简介 (14)三、JavaScript框架jQuery (15)第二节运行环境 (15)一、Sql Server 2008 R2 (16)二、Chrome 浏览器 (16)第四章实例开发与设计 (18)第一节聊天室需求分析 (18)一、用户注册登录 (18)二、用户聊天 (18)三、查看聊天记录 (18)第二节系统用例图 (18)第三节程序总体功能设计 (20)一、程序功能分析 (20)二、程序流程设计 (20)三、模块和对应的方法 (22)第四节详细设计与实现 (22)一、数据库设计 (22)二、服务器端设计 (23)三、客户端设计 (28)四、界面设计 (39)结论 (39)前言Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求，服务器端接收和审核完请求后进行处理并返回结果给客户端，然后客户端浏览器将信息呈现出来，这种机制对于信息变化不是特别频繁的应用尚能相安无事，但是对于那些实时要求比较高的应用来说，比如说在线游戏、在线证券、设备监控、新闻在线播报、RSS 订阅推送等等，当客户端浏览器准备呈现这些信息的时候，这些信息在服务器端可能已经过时了。

基于HTML5的在线学习系统的设计与实现作者：李兆翠来源：《科技风》2018年第36期摘要：在线课程学习网站的发展迅速，吸引了广大用户。

基于HTML5的在线学习系统经过需求分析、设计、编程等过程实现，它将文字、图片、音频、视频、课件、动画等教学资源融合在一起，配合在线留言、论坛等互动学习活动让在线学习功能更加丰富。

丰富的知识内容的呈现形式和互动学习活动更加吸引学习者参与到在线学习中，享受学习的乐趣，提高学习效率。

关键词：HTML5；在线学习；需求分析；在线测试目前在线课程学习网站的发展也是非常的迅速，它的出现吸引大量用户，满足了用户的移动学习要求。

随着流媒体技术的发展，通过多媒体技术将文字、图片、音频、视频、课件、动画等教学资源融合在一起让学习内容表现更加生动，同时配合在线留言、论坛等互动学习活动让在线学习功能更加丰富。

[1]用户不仅可以浏览文档，观看教学视频、教学课件，还可以进行在线练习、在线考试。

在线课程学习网站为广大用户们提供了十分便利的条件。

1 HTML5优势网站的建设大部分采用B/S 架构，压力聚集在服务器端，这就需要平衡客户端和服务器端的压力。

通过HTML5与JavaScript相结合使用将底层的大多数逻辑处理转移到客户端，服务器端只提供少量逻辑处理和数据接口，解决 B/S 架构服务器压力问题。

[2]HTML5具有动画特性、多媒体特性，可实现文字、图片、表格、音频、视频、色彩的有机结合。

HTML5新增的标签能直接支持视频、音频等多媒体元素的在线呈现，可以替代部分Flash和Silverlight能够实现的功能，并且具有更好的处理效率。

[3]同时配合CSS3支持字体嵌入、版面排版以及动画功能，让HTML5在线课程的学习内容的表现形式变得更加丰富，能极大吸引学习者的注意，增强学习效果。

同时HTML5还具有较好的学习交互、支持跨平台学习、离线学习等特性。

2 系统需求分析通过对教师、学生进行走访，结合传统课堂教学和网络教学，形成系统需求分析。

基于HTML5的在线答疑系统的白板设计与实现摘要：利用HTML5的Canvas技术为在线答疑系统设计并实现了实时白板功能，该功能可满足网络环境下教学、答疑的实时白板演示的需要，同时为网络几何问题讨论提供了技术支持。

关键词：HTML5；网络电子白板；在线答疑；教学互动0引言在网络虚拟教学环境下，教师常需要一个类似于教室中的白板（或黑板），以绘图或板书的形式为学生讲解问题。

以前由于技术的局限，实现该功能有一定的难度。

HTML5中的一些新技术为解决该问题提供了途径。

本文利用HTML5中的<Canvas>元素，用代码设计并实现了在线答疑系统的实时白板功能，可使之更好地服务于教学。

1白板功能的总体设计在线答疑平台的白板功能利用了目前最新的HTML5技术，通过对现实教室中白板（黑板）的网络虚拟化，实现了白板演示功能。

同时，结合Ajax技术和动态网页技术可实现画面的实时广播。

系统采用B/S（浏览器/服务器）模式，分为教师、学生两个界面。

教师可以通过白板提供的铅笔、点、线、矩形、圆、字等功能，轻松地在白板上绘制板书内容，而该板书内容会实时通过网络广播到每个在线的学生屏幕上。

本白板结合视频、语音聊天功能，可以开发在线网络教室等功能。

2白板的技术实现2.1HTML5及<Canvas>元素HTML5用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML版本，现在仍处于发展阶段，但大部分浏览器已经支持某些HTML5技术。

HTML5强化了Web网页的表现性能，并追加了本地数据库等Web应用的功能。

人们论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。

2.2白板的实现网络白板的内容主要由点、线、矩形、圆、文字及各类路径组成。

通过利用<Canvas>元素，编写Javascript代码即可实现这些内容，关键是设置和记录如下属性：2.3教师白板内容的广播实现了白板绘制只是第一步。

基于Web在线辅导答疑系统的设计与实现王晓婕【摘要】基于WWW方式的网络远程教学提供了一系列辅助教学的功能.在线答疑即是其中重要的一个部分.在线答疑系统的建设,解决了网络教学这种非面对面教学形式中学生与教师之间交流的难题.有了这样的系统,传统教学中的辅导答疑也可以放在网上进行,不受时间和地点的限制.教师可以根据学生提出的普遍问题,及时调整教学内容和进度、改进教学方式,从而改善教学的效果.学生在学习过程中产生的问题以及教师的解答,经过一定时间的积累还能够成为可重复利用的宝贵资源.主要就基于Web的多媒体在线答疑系统的功能及实现方法进行了讨论,并给出了实际的解决方法.【期刊名称】《现代电子技术》【年(卷),期】2006(029)014【总页数】3页(P105-106,112)【关键词】在线辅导答疑;ASP;Microsoft Access;网络教学【作者】王晓婕【作者单位】西安邮电学院,陕西,西安,710121【正文语种】中文【中图分类】TP31 引言因特网的普及使网络教学成为现实，答疑、解惑作为教育活动中的一个必不可少的环节，也是网络教学系统中的一个重要组成部分。

网络教学的优势在于用户在任何时间任何地点都可以上网参加学习，但由此产生的问题是教师不可能及时解答如此众多用户的提问，而且不断地回答重复或相似的提问也是低效的。

即便是面对面的传统教学形式，由于目前多为大班授课，类似的问题同样存在。

因此需要建立一个方便而高效的网上辅导答疑系统。

有了这样的系统，传统教学中的辅导答疑也可以放在网上进行，不受时间和地点的限制。

教师可以根据学生提出的普遍问题，及时调整教学内容和进度、改进教学方式，从而改善教学的效果。

学生在学习过程中产生的问题以及教师的解答，经过一定时间的积累还能够成为可重复利用的宝贵资源。

为此，开发了基于Web的在线辅导答疑系统，为师生提供一个交流的平台。

2 系统简介本系统目前主要用于计算机专业的课程答疑，从功能上分为学生提问、教师答疑、管理员版务管理3个模块；从内容上又可分为提问、答疑、题库、搜索、留言板、版主管理6个方面。

2020年第13期信息与电脑China Computer & Communication 软件开发与应用HTML5自定义画板的设计与实现梁敦毫　杨　力（广东茂名幼儿师范专科学校，广东 茂名　525000）摘　要：HTML5引入了很多新特性，具有强大的交互功能。

Canvas 是新增的标签，具有建立画板的功能。

利用画板可以完成绘图，但只能绘制线、矩形、圆等特定的图形，绘画内容严重受限制。

为了实现Canvas 画板的自由绘画，可以通过JavaScript 调用Canvas 相应的API 接口，制作具有自由绘画功能的自定义画板。

关键词：HTML5；JavaScript；画板中图分类号：TP393.08 文献标识码：A 文章编号：1003-9767（2020）13-098-03Design and Implementation of HTML5 Custom SketchpadLiang Dunhao, Yang Li(Guangdong Preschool Normal College in Maoming, Maoming Guangdong 525000, China)Abstract: HTML5 introduces many new features and has powerful interactive functions.Drawing can be completed by drawing board, but only lines, rectangles, circles and other specific graphics can be drawn, and the painting content is seriously limited.In order to realize the free drawing of canvas drawing board, we can call the corresponding API interface of canvas through JavaScript to make a custom drawing board with free drawing function.Key words: HTML5; JavaScript; drawing board０　引言HTML5自发布以来，给网页开发带来很大的改变，特别是在网页交互和多媒体功能方面，以前需要借助flash 等插件来完成的功能，现在都可以用HTML5来实现，例如画板。