websocket+node實現一個最簡單的即時通訊功能

騎著程式碼去流浪發表於2018-05-22
Web

http與websocket區別：

http協議請求只能由客戶端向服務端發起請求才能獲取最新的狀態，因此為了保持最新狀態，客戶端需要不間斷的定期請求伺服器，即所謂的“輪詢”，相對於這種耗費資源的協議，webscoket實現了雙向傳送資訊，即伺服器可以向客戶端主動推送訊息，客戶端也可以向伺服器主動推送訊息，從而不必為了保持最新訊息的獲取而不斷的輪詢。

在即時通訊中，使用者A與使用者B之間的通訊的資訊傳遞必須通過伺服器進行，如果使用http協議，當使用者A給使用者B發傳送資訊時，A的資訊先到達伺服器，B的客戶端如果要獲取A的即時資訊，需要不斷的向伺服器請求判斷A是否發訊息來了，直到請求到最新訊息B的客戶端才會接收到；如果使用websocket協議，當A的訊息傳送給伺服器之後，伺服器會主動把A的最新訊息推送給B的客戶端，B的客戶端可以直接收到訊息而不需要不斷地請求伺服器。

HTML5提供了websocket通訊的API，可以用來做客戶端；

node的ws模組提供的websocket的通訊功能可以用來開發服務端；

先看程式碼：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>您有新訊息（1）</title>
</head>
<body>
	<div>
		<ul class="msgs">
			<li>訊息內容</li>
		</ul>
		<div>
			<input type="text" name="" class="con">
		</div>
	</div>
	<script type="text/javascript">
		var ul = document.querySelector('.msgs');
		var input = document.querySelector('.con');
		//連線伺服器
		var ws = new WebSocket("ws://localhost:8003");
		//連線成功觸發
		ws.onopen = function(){
			alert("連線成功");
		}
		//連線失敗觸發
		ws.onerror = function(){
			alert("連線失敗");
		}
		//接收訊息觸發
		ws.onmessage = function(msg){
			add(msg.data);
		}
		//新增內容
		input.onkeydown = function(e){
			if(e.keyCode == 13){
				// add(this.value);
				ws.send(this.value);
			}
		}
		function add(con){
			var li = document.createElement("li");
				li.innerHTML = con;
				ul.appendChild(li);
				input.value = "";
		}
	</script>
</body>
</html>

node_server.js:

var server = require('ws').Server;
var ws = new server({
	port:8003
});
var connNum = [];
//函式引數，連線的物件
ws.on("connection",function(socket){
	connNum.push(socket);
	console.log("連線了"+connNum.length);
	//收到訊息傳送給每一個人
	socket.on("message",function(msg){
		//廣播給所有人
		for (var i = 0; i < connNum.length; i++) {
			connNum[i].send(msg);
		}
	})
	// socket.send("傳送的訊息");
	//斷開連線
	socket.on("close",function(){
		connNum.splice(connNum.indexOf(this),1);
	})
})

實現功能：

當使用者開啟該頁面，立即建立了跟後端的通訊通道；

當使用者在input框中輸入文字並回車時，文字資料傳到後端；

後端將任何一個使用者傳送的資料廣播到開啟該客戶端每一個使用者的客戶端（該網頁）上，客戶端獲取後端傳送來的資料後展示在頁面上。

工具：

安裝node以及相應的ws模組。

程式碼地址：https://github.com/RidingACodeToStray/node_websocket

相關文章