TML5草案的前身名為 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的 HTML 工作團(tuán)隊(duì)。

2012年12月17日，萬維網(wǎng)聯(lián)盟（W3C）正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范已經(jīng)正式定稿。根據(jù)W3C的發(fā)言稿稱：“HTML5是開放的Web網(wǎng)絡(luò)平臺(tái)的奠基石?！?/p>

2013年5月6日， HTML 5.1正式草案公布。該規(guī)范定義了第五次重大版本，第一次要修訂萬維網(wǎng)的核心語言：超文本標(biāo)記語言（HTML）。在這個(gè)版本中，新功能不斷推出，以幫助Web應(yīng)用程序的作者，努力提高新元素互操作性。HTML5添加了很多新元素及功能，比如： 圖形的繪制，多媒體內(nèi)容，更好的頁面結(jié)構(gòu)，更好的形式 處理，和幾個(gè)api拖放元素，定位，包括網(wǎng)頁 應(yīng)用程序緩存，存儲(chǔ)，網(wǎng)絡(luò)工作者，等。

支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國內(nèi)的傲游瀏覽器（Maxthon），以及基于IE或Chromium（Chrome的工程版或稱實(shí)驗(yàn)版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產(chǎn)瀏覽器同樣具備支持HTML5的能力。

H5的出現(xiàn)，不僅僅帶來酷炫的效果。更多的是對(duì)未來創(chuàng)造了無限可能。現(xiàn)在它不僅僅適用于在傳統(tǒng)的PC網(wǎng)頁，在移動(dòng)端，平板，微信，桌面應(yīng)用，智能家居等方面都得到了廣泛的應(yīng)用。所以近些年來，H5特別火。但是在公司招聘或者個(gè)人應(yīng)聘的時(shí)候，往往用h5工程師的很少，通常都是前端工程師，web全棧工程師這樣的稱謂。薪資也是根據(jù)工作經(jīng)驗(yàn)和個(gè)人能力從5k、8k到30k、50k不等。那么如何才能進(jìn)入這個(gè)最熱門的IT行業(yè)，學(xué)會(huì)乃至精通html5前端技術(shù)呢。

下面根據(jù)我個(gè)人的理解，總結(jié)了一下需要學(xué)習(xí)的技術(shù)：

基礎(chǔ)類：html,css,js,h5,css3常見特效

必須類：ajax（JSON&JSONP）,jquery(源碼和插件),bootstrap,DOM操作,web緩存（session，cookie, localStorage、sessionStorage）

晉級(jí)類：angularJs，reactJs,vueJs,meteor,wx-js-sdk,ionic,cordova,游戲(svg,webGL)

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

高級(jí)類：js高級(jí)設(shè)計(jì)（作用域，原型鏈，閉包原型鏈面向?qū)ο蟆⒃O(shè)計(jì)模式），nodejs(express,koa,..)，mysql(sequelize)，mongodb(mongoose),模板引擎（ejs/jade/handlebars）linux,redis,nginx/Apache,微信小程序,Ember，CoffeeScript,TypeScript,JSX,桌面應(yīng)用（Electron）

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

學(xué)會(huì)了以上的70%，你就能成為一名合格的前端工程師了，如果上面的技能全都學(xué)會(huì)并精通了，那么恭喜你，你就從大前端全棧工程師，向全能爆棧工程師邁進(jìn)了！

不多說先上效果圖演示

項(xiàng)目：http://112.74.164.107:9990/

1、安裝組建

redis: yum install redis/apt install redis

2、創(chuàng)建虛擬化環(huán)境并進(jìn)入

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、啟動(dòng)服務(wù)

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

6、訪問

瀏覽器訪問 http://ip:9990

整個(gè)項(xiàng)目中涉及的思路和知識(shí)點(diǎn)我們?cè)谶@里都一一分解為大家詳細(xì)解說如下：

Django 基礎(chǔ)

Django ：一個(gè)可以使 Web 開發(fā)工作愉快并且高效的 Web 開發(fā)框架，能夠以最小的代價(jià)構(gòu)建和維護(hù)高質(zhì)量的 Web 應(yīng)用

框架：軟件開發(fā)工程師從日常的重復(fù)勞動(dòng)中總結(jié)出快速的、模塊化的、安全的軟件開發(fā)模式

Django 是 Python 開發(fā)者的最佳 Web 框架

MVC

ORM

Object Relation Mapping (關(guān)系對(duì)象映射)

• 用來把對(duì)象模型表示的對(duì)象映射到基于 SQL 的關(guān)系模型數(shù)據(jù)庫結(jié)構(gòu)中去
• 在具體的操作實(shí) 體對(duì)象的時(shí)候，就不 需要再去和復(fù)雜的 SQL 語句打交道，只 需簡(jiǎn)單的操作實(shí)體對(duì) 象的屬性和方法

Mail (通過郵箱和驗(yàn)證碼方式進(jìn)行用戶登錄驗(yàn)證)

開發(fā)者可為使用 Django 提供的 send_mail 函數(shù)發(fā)送郵件

使用方法

配置郵箱(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

發(fā)送

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

注: django 發(fā)送郵件封裝 python smtplib 模塊，smtplib 使用方 法: https://github.com/imsilence/packages/blob/master/python/mailclient.py

Session & Cookie

實(shí)現(xiàn)用戶認(rèn)證機(jī)制

• HTTP 協(xié)議為無狀態(tài)
• Session 存儲(chǔ)在服務(wù)器
• Cookie 存儲(chǔ)在客戶端

WebSocket 基礎(chǔ)(實(shí)現(xiàn)服務(wù)端消息主動(dòng)推送客戶端)

是什么?

WebSocket 是 HTML5 開始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議

為什么需要?

HTTP 協(xié)議是一種無狀態(tài)的、無連接的、單向的應(yīng)用層協(xié)議。它采用了請(qǐng)

求/響應(yīng)模型。通信請(qǐng)求只能由客戶端發(fā)起，服務(wù)端對(duì)請(qǐng)求做出應(yīng)答處理

弊端: HTTP 協(xié)議無法實(shí)現(xiàn)服務(wù)器主動(dòng)向客戶端發(fā)起消息。

傳統(tǒng)模式下， Web 應(yīng)用程序通過頻繁的 ajax 請(qǐng)求實(shí)現(xiàn)長輪詢( 輪詢是在 特定的時(shí)間間隔(如每1秒),由瀏覽器對(duì)服務(wù)器發(fā)出 HTTP 請(qǐng)求，然后由 服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器)

缺點(diǎn):輪詢的效率低，非常浪費(fèi)帶寬等資源(瀏覽器需要不斷的向服務(wù)器

發(fā)出請(qǐng)求)

如何工作?

Web 瀏覽器和服務(wù)器都必須實(shí)現(xiàn) WebSockets 協(xié)議來建立和維護(hù)連 接，由于 WebSockets 連接長期存在，與典型的 HTTP 連接不同，對(duì) 服務(wù)器有重要的影響(任何 WebSockets 服務(wù)器都需要實(shí)現(xiàn)為異步服 務(wù)器，基于多線程或多進(jìn)程的服務(wù)器無法適用于 WebSockets，因?yàn)?它旨在打開連接，盡可能快地處理請(qǐng)求，然后關(guān)閉連接)

在 WebSocket 協(xié)議中, 瀏覽器和服務(wù)器只需要做一個(gè)握手的動(dòng)作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。

如何使用?

客戶端 API (javascript)

1、創(chuàng)建 websocket 對(duì)象

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

2、屬性

ws.readyState 表示連接狀態(tài)

可選值:

• 0: 表示連接尚未建立。
• 1: 表示連接已建立，可以進(jìn)行通信。
• 2: 表示連接正在進(jìn)行關(guān)閉。
• 3: 表示連接已經(jīng)關(guān)閉或者連接不能打開。

ws.bufferedAmount 表示已被 send() 方法放入正在隊(duì)列中等待傳輸，但是還沒有發(fā) 出的 UTF-8 文本字節(jié)數(shù)

3、事件

• open ws.onopen 建立連接時(shí)觸發(fā)
• message ws.onmessage 客戶端接收服務(wù)端數(shù)據(jù)時(shí)觸發(fā)
• error ws.onerror 通信發(fā)生錯(cuò)誤時(shí)觸發(fā)
• close ws.onclose 連接關(guān)閉時(shí)觸發(fā)

4、方法

send ws.send() 使用連接發(fā)送數(shù)據(jù)

close ws.close() 關(guān)閉連接

dwebsocket 使用

dwebsocket 模塊為 django 提供了 WebSocket 協(xié)議的實(shí)現(xiàn)

使用

1、安裝

pip install dwebsocket

2、用法

使用 accept_websocket 或 require_websocket 裝飾器修飾 view

• accept_websocket: view 既可處理 websocket 協(xié)議又可處理普通 http協(xié)議
• require_websocket: view 只處理 websocket 協(xié)議，拒絕處理普通 http協(xié)議

request.is_websocket 方法用于判斷是否為 websocket 協(xié)議

獲取 websocket 連接對(duì)象

• request.websocket 對(duì)象

獲取數(shù)據(jù)

• request.websocket.wait 方法, 阻塞性獲取客戶端數(shù)據(jù)
• request.websocket.read 方法，非阻塞性獲取客戶端數(shù)據(jù)

發(fā)送數(shù)據(jù)

• request.websocket.send(message): 發(fā)送消息給 websocket 客戶端

其他

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

redis 基礎(chǔ)

Redis 是一個(gè)開源的，基于內(nèi)存的，可持久化的，K-V 數(shù)據(jù)庫

用途:

• 緩存
• 消息隊(duì)列
• 發(fā)布訂閱

發(fā)布訂閱:是一種消息通信模式，發(fā)送者(pub)發(fā)送消息，縮 影訂閱者(sub)都可以接收消息并處理

1、在 redis 客戶端中使用

• 訂閱:subscribe channel
• 發(fā)布:publish channel message

2、在 python 中使用

redis 模塊

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

訂閱

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

發(fā)布:

• cli.publish(channel, message)

代碼解讀——項(xiàng)目啟動(dòng)

代碼結(jié)構(gòu)

app 定義（app.py）

配置（settings.py）

• 配置訪問地址

• 啟用 app

• 配置模版路徑

• 配置時(shí)區(qū)和國際化

• 配置靜態(tài)資源路徑

• 配置郵箱

• 配置 redis 緩存

代碼解讀——用戶認(rèn)證流程

流程

1、打開登錄頁面

• 瀏覽器中輸入 http://ip:9990/login/, 瀏覽器發(fā)送 GET 請(qǐng)求到 login/
• urls.py 處理 url login/ 到視圖 login
• login 視圖 打開 login.html 模板

2、發(fā)送驗(yàn)證碼

• 填寫郵箱，點(diǎn)擊發(fā)送驗(yàn)證碼按鈕，瀏覽器發(fā)送 ajax(GET) 請(qǐng)求到 login_code/
• urls.py 處理 url login_code/ 到視圖 login_code
• login 視圖調(diào)用 models 創(chuàng)建并記錄驗(yàn)證碼，同時(shí)發(fā)送郵件給用戶，返回 json 數(shù) 據(jù)

3、登錄

• 填寫驗(yàn)證碼，點(diǎn)擊登陸按鈕，瀏覽器發(fā)送 ajax(POST) 請(qǐng)求到 login/
• urls.py 處理 url login/ 到視圖 login
• login 視圖調(diào)用 models 驗(yàn)證郵箱和驗(yàn)證碼，返回 json 數(shù)據(jù)，當(dāng)驗(yàn)證成功同時(shí)記錄 session 數(shù)據(jù)

路由（url.py）

視圖-view.py

視圖-models.py

視圖-templates/login.html

代碼解讀——websocket 處理流程

流程

創(chuàng)建 websocket 連接到 msg/，同時(shí)注冊(cè) open, error, message 事件

當(dāng)連接創(chuàng)建，調(diào)用 websocket.send 發(fā)送上線消息

用戶填寫消息，點(diǎn)擊按鈕，調(diào)用 websocket.send 方法發(fā)送聊天消息

urls.py 處理 url msg/ 到視圖 msg

msg 視圖接收和處理 websocket 消息，同時(shí)監(jiān)聽和處理 redis 訂閱的 消息

• 當(dāng)接收到 websocket 消息，發(fā)布消息到 redis 通道
• 當(dāng)接收到 redis 發(fā)布消息，則發(fā)送到 websocket 客戶端

獲取 websocket 連接和發(fā)送消息（index.html）

路由處理（view.py）

消息顯示處理（index.html）

代碼解讀——推出登陸流程

大家對(duì)此項(xiàng)目分享有什么疑問的請(qǐng)準(zhǔn)備好在本周三晚上我們的 kk 大牛會(huì)為大家一一解答。

項(xiàng)目分享人：KK老師

多語言混搭開發(fā)工程師，多年 PHP、Python 項(xiàng)目開發(fā)經(jīng)驗(yàn)，曾就職 360、綠盟科技，7年工作經(jīng)驗(yàn)。擅長于 Web 安全開發(fā)、性能優(yōu)化、分布式應(yīng)用開發(fā)&設(shè)計(jì)等多方面，51Reboot 金牌講師。

分享的時(shí)間：2018-12-12 21:00-22:00

參與方式：添加小助手wechat：17801747114 備注：公開課，會(huì)拉入直播分享群