天天看點

nodejs系列(10)實作socket通信Socket服務端Socket用戶端

Socket主要作用是實作用戶端與服務端的實時通信保持通話,它不像ajax請求,每次對話完成後都會把連接配接斷開。Socket通信在Node.js中實作其實很簡單,沒有想象中複雜,基本上隻要懂得監聽(.on)和推送(.emit)消息,即能實作Socket通信。

Socket服務端

在服務端使用Socket,需先引入socket.io子產品,該子產品詳細文檔可參考https://socket.io/:

cnpm install socket.io
           

服務端執行個體代碼如下:

var server = app.listen(8081, "127.0.0.1", function() {
	var host = server.address().address;
	var port = server.address().port;
});

/********************socketIO********************/
var io = require('socket.io').listen(server);
// 建立連接配接
io.sockets.on('connection', function(socket) { //此處每個回調socket就是一個獨立的用戶端,通常會用一個公共清單數組統一管理
	// 連接配接斷開,如關閉頁面時觸發
	socket.on('disconnect', function() {
		console.log('已斷開連結');
	});
	// 監聽用戶端發送的消息
	socket.on('clientmessage', function(data) {
		//推送給除自己外其他所有使用者的消息,類似于廣播
		socket.broadcast.emit('message', {
			text: '你的朋友上線了'
		});
	});
	//發送給自己的消息
	socket.emit('message', {
		text: '你上線了'
	});
});
           

上例中實作了4步:

1. 建立連接配接并添加斷開連接配接監聽。

2. 建立clientmessage監聽,當用戶端發來該名稱的事件時,伺服器向除自己外其他的使用者廣播事件名稱為message的消息。

3.在剛建立連接配接時,向用戶端推送事件名稱為message的消息。

其中主要應用到的函數有5個:

.on('connection', function(socket){ }):與用戶端建立連接配接時監聽。

.on('disconnect', function(){ }):與用戶端斷開連接配接時監聽。

.on('event-name', function(data) { }):監聽用戶端發來的消息。

.broadcast.emit('event-name', { }):向除自己外的所有其他使用者廣播消息。

.emit('event-name', { }):僅向目前連接配接的用戶端(自己)推送消息。

(注)相關用戶端的接口關聯請往下看用戶端的例子。

Socket用戶端

需先去下載下傳socket.io.js檔案,下載下傳位址為:https://github.com/socketio/socket.io-client

用戶端執行個體代碼如下:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>socketio測試</title>
		<script>
			var tmp_html = '<link rel="stylesheet" href="../js/libs/bootstrap/3.3.7/css/bootstrap.css" target="_blank" rel="external nofollow" />';
			tmp_html += '<script src="../js/libs/jquery/3.2.1/jquery.js"><\/script>';
			tmp_html += '<script src="../js/libs/bootstrap/3.3.7/bootstrap.js"><\/script>';
			tmp_html += '<script src="../js/libs/socketio/socket.io.js"><\/script>';
			document.write(tmp_html);
			document.close();
		</script>
	</head>

	<body>
		<button id="btn">發送消息</button>
	</body>
	<script>
		var socket = io.connect('http://127.0.0.1:8081');
		socket.on('message', function(data) {
			console.log(data.text);
		})

		$("#btn").click(function() {
			socket.emit('clientmessage', {
				text: "hello"
			});
		});
	</script>

</html>
           

用戶端主要應用到的函數有2個:

.on('event-name', function(data) { }):監聽服務端發來的消息。

.emit('event-name', { }):向服務端推送消息。

Socket即時通信就是那麼簡單,而且在連接配接斷開時還會自動重連。還有一種實作方法就是使用net子產品的套接字,可以直接檢視Node.js文檔。

繼續閱讀