TML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。

2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”

2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。HTML5添加了很多新元素及功能，比如： 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等。

支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

H5的出现，不仅仅带来酷炫的效果。更多的是对未来创造了无限可能。现在它不仅仅适用于在传统的PC网页，在移动端，平板，微信，桌面应用，智能家居等方面都得到了广泛的应用。所以近些年来，H5特别火。但是在公司招聘或者个人应聘的时候，往往用h5工程师的很少，通常都是前端工程师，web全栈工程师这样的称谓。薪资也是根据工作经验和个人能力从5k、8k到30k、50k不等。那么如何才能进入这个最热门的IT行业，学会乃至精通html5前端技术呢。

下面根据我个人的理解，总结了一下需要学习的技术：

基础类：html,css,js,h5,css3常见特效

必须类：ajax（JSON&JSONP）,jquery(源码和插件),bootstrap,DOM操作,web缓存（session，cookie, localStorage、sessionStorage）

晋级类：angularJs，reactJs,vueJs,meteor,wx-js-sdk,ionic,cordova,游戏(svg,webGL)

拓展类：版本控制（SVN/Git）构建工具（yoman/bower/grunt/gulp/webpack）,sass,less,stylus,Foundation,php,es6（promise,generator,co）,es7(await,async),cdn加速，SEO优化，http,模块化（commonjs,seajs,requirejs）,zepto.js,Jquery.mobile,react Native，backboneJs，lodash,prototype,fis,webwork,websocket

高级类：js高级设计（作用域，原型链，闭包原型链面向对象、设计模式），nodejs(express,koa,..)，mysql(sequelize)，mongodb(mongoose),模板引擎（ejs/jade/handlebars）linux,redis,nginx/Apache,微信小程序,Ember，CoffeeScript,TypeScript,JSX,桌面应用（Electron）

工具类：webstrom，sublime，VSCode,Atom,Vim,Dreamweaver,postman，fiddler，Hbuilder,photoshop

学会了以上的70%，你就能成为一名合格的前端工程师了，如果上面的技能全都学会并精通了，那么恭喜你，你就从大前端全栈工程师，向全能爆栈工程师迈进了！

不多说先上效果图演示

项目：http://112.74.164.107:9990/

1、安装组建

redis: yum install redis/apt install redis

2、创建虚拟化环境并进入

python3/python -m venv venv

source venv\bin\active

3、安装第三方库

pip install -r requirements.txt

4、初始化

python manage.py makemigrations

python manage.py migrate

python manage.py collectstatic

5、启动服务

gunicorn -w 5 -k gevent -b 0.0.0.0:9990 webchat.wsgi

6、访问

浏览器访问 http://ip:9990

整个项目中涉及的思路和知识点我们在这里都一一分解为大家详细解说如下：

Django 基础

Django ：一个可以使 Web 开发工作愉快并且高效的 Web 开发框架，能够以最小的代价构建和维护高质量的 Web 应用

框架：软件开发工程师从日常的重复劳动中总结出快速的、模块化的、安全的软件开发模式

Django 是 Python 开发者的最佳 Web 框架

MVC

ORM

Object Relation Mapping (关系对象映射)

• 用来把对象模型表示的对象映射到基于 SQL 的关系模型数据库结构中去
• 在具体的操作实 体对象的时候，就不 需要再去和复杂的 SQL 语句打交道，只 需简单的操作实体对 象的属性和方法

Mail (通过邮箱和验证码方式进行用户登录验证)

开发者可为使用 Django 提供的 send_mail 函数发送邮件

使用方法

配置邮箱(setting.py)

• EMAIL_HOST='smtp-mail.outlook.com'
• EMAIL_PORT=587
• EMAIL_HOST_USER='imsilence@outlook.com'
• EMAIL_HOST_PASSWORD=‘xxxxxx'
• EMAIL_USE_TLS=True
• EMAIL_FROM=EMAIL_HOST_USER

发送

send_mail(subject, message, from_email, recipient_list, fail_silently=False, auth_user=None, auth_password=None, connection=None, html_message=None)

注: django 发送邮件封装 python smtplib 模块，smtplib 使用方 法: https://github.com/imsilence/packages/blob/master/python/mailclient.py

Session & Cookie

实现用户认证机制

• HTTP 协议为无状态
• Session 存储在服务器
• Cookie 存储在客户端

WebSocket 基础(实现服务端消息主动推送客户端)

是什么?

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议

为什么需要?

HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请

求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理

弊端: HTTP 协议无法实现服务器主动向客户端发起消息。

传统模式下， Web 应用程序通过频繁的 ajax 请求实现长轮询( 轮询是在 特定的时间间隔(如每1秒),由浏览器对服务器发出 HTTP 请求，然后由 服务器返回最新的数据给客户端的浏览器)

缺点:轮询的效率低，非常浪费带宽等资源(浏览器需要不断的向服务器

发出请求)

如何工作?

Web 浏览器和服务器都必须实现 WebSockets 协议来建立和维护连 接，由于 WebSockets 连接长期存在，与典型的 HTTP 连接不同，对 服务器有重要的影响(任何 WebSockets 服务器都需要实现为异步服 务器，基于多线程或多进程的服务器无法适用于 WebSockets，因为 它旨在打开连接，尽可能快地处理请求，然后关闭连接)

在 WebSocket 协议中, 浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

如何使用?

客户端 API (javascript)

1、创建 websocket 对象

var ws=new WebSocket(url, [protocol] );

2、属性

ws.readyState 表示连接状态

可选值:

• 0: 表示连接尚未建立。
• 1: 表示连接已建立，可以进行通信。
• 2: 表示连接正在进行关闭。
• 3: 表示连接已经关闭或者连接不能打开。

ws.bufferedAmount 表示已被 send() 方法放入正在队列中等待传输，但是还没有发 出的 UTF-8 文本字节数

3、事件

• open ws.onopen 建立连接时触发
• message ws.onmessage 客户端接收服务端数据时触发
• error ws.onerror 通信发生错误时触发
• close ws.onclose 连接关闭时触发

4、方法

send ws.send() 使用连接发送数据

close ws.close() 关闭连接

dwebsocket 使用

dwebsocket 模块为 django 提供了 WebSocket 协议的实现

使用

1、安装

pip install dwebsocket

2、用法

使用 accept_websocket 或 require_websocket 装饰器修饰 view

• accept_websocket: view 既可处理 websocket 协议又可处理普通 http协议
• require_websocket: view 只处理 websocket 协议，拒绝处理普通 http协议

request.is_websocket 方法用于判断是否为 websocket 协议

获取 websocket 连接对象

• request.websocket 对象

获取数据

• request.websocket.wait 方法, 阻塞性获取客户端数据
• request.websocket.read 方法，非阻塞性获取客户端数据

发送数据

• request.websocket.send(message): 发送消息给 websocket 客户端

其他

• request.websocket.count_messages()
• request.websocket.has_messages()
• request.websocket.__iter__()

redis 基础

Redis 是一个开源的，基于内存的，可持久化的，K-V 数据库

用途:

• 缓存
• 消息队列
• 发布订阅

发布订阅:是一种消息通信模式，发送者(pub)发送消息，缩 影订阅者(sub)都可以接收消息并处理

1、在 redis 客户端中使用

• 订阅:subscribe channel
• 发布:publish channel message

2、在 python 中使用

redis 模块

• pip install redis
• cli=redis.StrictRedis()

订阅

• pubsub=cli.pubsub()
• pubsub.subscribe(channel)
• pubsub.get_message()

发布:

• cli.publish(channel, message)

代码解读——项目启动

代码结构

app 定义（app.py）

配置（settings.py）

• 配置访问地址

• 启用 app

• 配置模版路径

• 配置时区和国际化

• 配置静态资源路径

• 配置邮箱

• 配置 redis 缓存

代码解读——用户认证流程

流程

1、打开登录页面

• 浏览器中输入 http://ip:9990/login/, 浏览器发送 GET 请求到 login/
• urls.py 处理 url login/ 到视图 login
• login 视图 打开 login.html 模板

2、发送验证码

• 填写邮箱，点击发送验证码按钮，浏览器发送 ajax(GET) 请求到 login_code/
• urls.py 处理 url login_code/ 到视图 login_code
• login 视图调用 models 创建并记录验证码，同时发送邮件给用户，返回 json 数 据

3、登录

• 填写验证码，点击登陆按钮，浏览器发送 ajax(POST) 请求到 login/
• urls.py 处理 url login/ 到视图 login
• login 视图调用 models 验证邮箱和验证码，返回 json 数据，当验证成功同时记录 session 数据

路由（url.py）

视图-view.py

视图-models.py

视图-templates/login.html

代码解读——websocket 处理流程

流程

创建 websocket 连接到 msg/，同时注册 open, error, message 事件

当连接创建，调用 websocket.send 发送上线消息

用户填写消息，点击按钮，调用 websocket.send 方法发送聊天消息

urls.py 处理 url msg/ 到视图 msg

msg 视图接收和处理 websocket 消息，同时监听和处理 redis 订阅的 消息

• 当接收到 websocket 消息，发布消息到 redis 通道
• 当接收到 redis 发布消息，则发送到 websocket 客户端

获取 websocket 连接和发送消息（index.html）

路由处理（view.py）

消息显示处理（index.html）

代码解读——推出登陆流程

大家对此项目分享有什么疑问的请准备好在本周三晚上我们的 kk 大牛会为大家一一解答。

项目分享人：KK老师

多语言混搭开发工程师，多年 PHP、Python 项目开发经验，曾就职 360、绿盟科技，7年工作经验。擅长于 Web 安全开发、性能优化、分布式应用开发&设计等多方面，51Reboot 金牌讲师。

分享的时间：2018-12-12 21:00-22:00

参与方式：添加小助手wechat：17801747114 备注：公开课，会拉入直播分享群