胡言亂語websocket

時間 2019-12-07

標籤胡言亂語 websocket 简体版

原文原文鏈接

小胡：公子，你今天爲啥寫websocket？html

魏三：由於你家公子我健忘啊，不寫寫一下子我忘了怎麼辦？node

小胡：公子你昨天的es6坑還沒填？es6

魏三：我昨天寫了啥？？？web

Websocket是什麼？

Websocket是一種網絡通訊協議，爲何要新建協議，HTTP協議不能用嗎？HTTP協議有個缺點就是通訊只能由客戶端發起。HTTP協議作不到主動推送數據給客戶端。express

前幾天我去社康看病，能夠掃碼看排隊狀況，看前面排了幾我的。掃完碼以後我就看到頁面不停的在刷新，也就是說頁面不停的在請求後臺。爲何會這樣呢？bash

想要獲取最新的狀況，在HTTP協議裏面須要不停的經過客戶端問服務器，有最新沒有？因此就要不停的發送請求過去。輪詢的越頻繁在用戶多的狀況下發送的請求就越多，服務器的壓力也就越大。因此若是不用WebSocket的話，咱們就只能刷新頁面看最新的狀況。服務器

爲何WebSocket鏈接能夠實現雙向通訊而HTTP鏈接不行呢？實際上HTTP協議是創建在TCP協議之上的，TCP協議自己就實現雙向統統信，可是HTTP協議的請求－應答機制限制了雙向統統信。WebSocket鏈接創建之後，其實只是簡單規定了一下：接下來，我們通訊就不使用HTTP協議了，直接互相發數據吧。websocket

若是這些你都記不住的話，簡單一句人話就是HTTP是單行道，WebSocket是雙行道。若是你還不清楚，能夠看下我借用大神阮一峯的圖網絡

WebSocket能幹什麼？

WebSocket一旦創建了通訊，雙行道創建好後，就能夠實時通訊了。好比股市的實時滾動啦，天氣實時更新啦。app

WebSocket是怎麼幹的？

WebSocket並非全新的協議，而是利用了HTTP協議來創建鏈接。咱們來看看WebSocket鏈接是如何建立的。

先寫一個node裏面的簡單示範

//index.js文件中引入兩個模塊
const http=require('http');
//封裝了WebSocket的模塊
const io=require('socket.io');

//起一個http的服務
let httpServer=http.createServer();
httpServer.listen(3000);

//websocket也監聽一樣的端口
let wsServer=io.listen(httpServer);
wsServer.on('connection',function(sock){
  //通訊鏈接成功後，定時發送數據到客戶端。
   setInterval(function(){
   	  sock.emit("ttt",Math.random())
   },500)
   
})

//第二種方法

// index.js文件
const express = require('express');
const app = express();
// 設置靜態文件夾
app.use(express.static(__dirname));
// 經過node的http模塊來建立一個server服務
const server = require('http').createServer(app);
// WebSocket是依賴HTTP協議進行握手的
const io = require('socket.io')(server);
// 監聽客戶端與服務端的鏈接
io.on('connection', function(socket) {
  setInterval(function() {
        socket.emit("ttt", Math.random())
    }, 500)
});
// 監聽3000端口
server.listen(3000);

//使用node index.js起了這個服務後會發送數據到3000端口

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	//引入模塊
	<script src="http://localhost:3000/socket.io/socket.io.js"></script>
</head>
<body>
	<script>
	    //鏈接websocket的端口。
		let sock=io.connect("ws://localhost:3000/");
        //接收數據
         sock.on('ttt',function(args){
         	console.log(`服務器發送了：${args}`);
         })
	</script>
</body>
</html>

複製代碼

第一種和第二種方法的區別就是，第二種引入了express框架，你能夠用http://localhost:3000/index.html訪問index.html。按照上面的辦法你就能夠收到服務器端發送到客戶端的數據了，因此WebSocket你入門了嗎？

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。