Node.js實現WebSocket聊天室的例子

時間 2019-11-11

標籤 node.js node 實現 websocket 聊天室例子欄目 Node.js 简体版

原文原文鏈接

對於聊天室，你們應該都不陌生，筆者也寫過不少關於聊天室的例子。javascript

本節，咱們將演示如何經過Node.js來實現一個WebSocket聊天服務器的例子。html

使用ws建立WebSokcet服務器

Node.js原生API並未提供WebSocket的支持，所以，須要安裝第三方包才能使用WebSocket功能。對於WebSocket的支持，在開源社區有很是多的選擇，本例子採用的是「ws」框架（項目主頁爲https://github.com/websockets/ws）。java

「ws」顧名思義是一個用於支持WebSocket客戶端和服務器的框架。它易於使用，功能強大，且不依賴於其餘環境。node

想其餘Node.js應用同樣，使用ws的首選方式是使用npm來管理。如下命令行用於安裝ws在應用裏面：git

npm install ws

具有了ws包以後，就能夠建立WebSocket服務器了。如下是建立服務器的j簡單示例：github

const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

上述例子服務器啓動在8080端口。web

聊天服務器的需求

聊天服務器的業務需求比較簡單，是一個羣聊聊天室。換言之，全部人發送的消息你們均可以見到。npm

當有新用戶鏈接到服務器時，會以該用戶的「IP+端口」做爲用戶的名稱。瀏覽器

服務器的實現

根據前面知識的學習，實現一個聊天服務器比較簡單，完整代碼以下：服務器

const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('open', function open() {
  console.log('connected');
});

server.on('close', function close() {
  console.log('disconnected');
});

server.on('connection', function connection(ws, req) {
  const ip = req.connection.remoteAddress;
  const port = req.connection.remotePort;
  const clientName = ip + port;

  console.log('%s is connected', clientName)

  // 發送歡迎信息給客戶端
  ws.send("Welcome " + clientName);

  ws.on('message', function incoming(message) {
    console.log('received: %s from %s', message, clientName);
    
    // 廣播消息給全部客戶端
    server.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send( clientName + " -> " + message);
      }
    });

  });

});

當客戶端給服務器發送消息時，服務器會將該客戶端的消息轉發給全部客戶端。

客戶端的實現

客戶端是通HTML+JavaScript的方式實現的。因爲瀏覽器原生提供了WebSocket的API，因此並不須要ws框架的支持。

客戶端client.html文件代碼以下：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>WebSocket Chat</title>
</head>

<body>
	<script type="text/javascript">
		var socket;
		if (!window.WebSocket) {
			window.WebSocket = window.MozWebSocket;
		}
		if (window.WebSocket) {
			socket = new WebSocket("ws://localhost:8080/ws");
			socket.onmessage = function (event) {
				var ta = document.getElementById('responseText');
				ta.value = ta.value + '\n' + event.data
			};
			socket.onopen = function (event) {
				var ta = document.getElementById('responseText');
				ta.value = "鏈接開啓!";
			};
			socket.onclose = function (event) {
				var ta = document.getElementById('responseText');
				ta.value = ta.value + "鏈接被關閉";
			};
		} else {
			alert("你的瀏覽器不支持 WebSocket！");
		}

		function send(message) {
			if (!window.WebSocket) {
				return;
			}
			if (socket.readyState == WebSocket.OPEN) {
				socket.send(message);
			} else {
				alert("鏈接沒有開啓.");
			}
		}
	</script>
	<form onsubmit="return false;">
		<h3>WebSocket 聊天室：</h3>
		<textarea id="responseText" style="width: 500px; height: 300px;"></textarea>
		<br>
		<input type="text" name="message" style="width: 300px" value="Welcome to waylau.com">
		<input type="button" value="發送消息" onclick="send(this.form.message.value)">
		<input type="button" onclick="javascript:document.getElementById('responseText').value=''" 
			value="清空聊天記錄">
	</form>
	<br>
	<br>
	<a href="https://waylau.com/">更多例子請訪問 waylau.com</a>
</body>

</html>