WebSocket JavaScript CSS教程
一、為什麼需要 WebSocket？
初次接觸 WebSocket 的人，都會問同樣的問題：我們已經有了 HTTP 協議，為什麼還需要另一個協議？它能帶來什麼好處？
答案很簡單，因為 HTTP 協議有一個缺陷：通信只能由客戶端發起。
舉例來說，我們想了解今天的天氣，只能是客戶端向服務器發出請求，服務器返回查詢結果。HTTP 協議做不到服務器主動向客戶端推送信息。
這種單向請求的特點，註定瞭如果服務器有連續的狀態變化，客戶端要獲知就非常麻煩。我們只能使用“輪詢”：每隔一段時候，就發出一個詢問，瞭解服務器有沒有新的信息。最典型的場景就是聊天室。
輪詢的效率低，非常浪費資源（因為必須不停連接，或者 HTTP 連接始終打開）。因此，工程師們一直在思考，有沒有更好的方法。WebSocket 就是這樣發明的。
教程目標
本教程的目標是利用VueJS以及Webpack從頭創建一個基礎但完整的漸進式Web應用。我們的應用將會滿足介紹裡面的所有需求：漸進式的，響應式的，連接獨立的等等。我想大致讓你看看PWA能夠實現些什麼：流暢的類原生應用，離線行為，原生特性接口，推送通知。
為了讓事情有些挑戰性，我們打算構建一個貓咪圖片交流app：CropChat！CropChat用戶能夠瀏覽貓咪照片流，點擊圖片之後可以打開這個貓咪的詳情介紹，用戶也可以發佈新的貓咪圖片（圖片資源可以是來自互聯網，來自設備圖片庫或通過照相機拍攝的）。
這個教程將會分為幾個部分：
[Part 1] 創建一個基於VueJS, Webpack 以及Material Design Lite的單頁面應用
[Part 2] 基於Vue-Resource以及VueFire將App和遠程的API進行連接
[Part 3] 利用Service Worker來實現離線模式
[Part 4] 訪問設備照相機進行拍照
[Part 5] 訪問設備驅動上傳圖片
[Part 6] 實現推送通知
[Part 7] 訪問設備地址
這代碼標題是不是有點逼格
仿蘋果電腦任務欄菜單
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿蘋果電腦任務欄菜單</title>
<style type="text/css">
body {
margin:0;
padding:0
}
#menu {
position:absolute;
width:100%;
bottom:0;
text-align:center;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
var oMenu = document.getElementById("menu");
var aImg = oMenu.getElementsByTagName("img");
var aWidth = [];
var i = 0;
//保存原寬度, 並設置當前寬度
for (i = 0; i < aImg.length; i++)
{
aWidth.push(aImg[i].offsetWidth);
aImg[i].width = parseInt(aImg[i].offsetWidth / 2);
}
//鼠標移動事件
document.onmousemove = function (event)
{
var event = event || window.event;
for (i = 0; i < aImg.length; i++)
{
var a = event.clientX - aImg[i].offsetLeft - aImg[i].offsetWidth / 2;
var b = event.clientY - aImg[i].offsetTop - oMenu.offsetTop - aImg[i].offsetHeight / 2;
var iScale = 1 - Math.sqrt(a * a + b * b) / 300;
if (iScale < 0.5) iScale = 0.5;
aImg[i].width = aWidth[i] * iScale
}
};
};
</script>
</head>
<body>
<div id="menu"> <img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /></div>
</body>
</html>
安裝 Material Design Lite
你還不知道Material Design Lite？它是一個輕量級的並且容易在你的Web應用上實現Material Design 的框架。
總結
我相信通過這個教程你已經有能力能夠很輕鬆地使用VueJS和Webpack來創建一個web應用，總結一下：
Vue-cli用過僅僅一行命令來創建一個VueJS + Webpack應用
通過添加Manifest.json文件讓你的web應用能夠安裝
使用Vue-Router以及Material Design來創建一個類app用戶體驗的應用
然而，CropChat 還依然不是一個漸進式 Web 應用：讓我們看一下PWA的需求清單：
啊，還有一半的目標沒有實現！那麼在接下來的幾部分中，我們將完成這些目標，敬請期待！
如果你你熱愛WEB前端，熱愛這個行業就應該持續走下去，如果你看到這裡歡迎一起來學習交流575546903還有大神解答問題分享學習資料