一步一步教您用websocket+nodeJS搭建简易聊天室(3)

最新推荐文章于 2020-08-12 23:38:32 发布

weixin_33701564

最新推荐文章于 2020-08-12 23:38:32 发布

阅读量110

点赞数

文章标签：网络 python 后端

原文链接：https://my.oschina.net/babyanzichen/blog/1574155

版权

2019独角兽企业重金招聘Python工程师标准>>>

上节我们使用node.js搭建了属于自己的第一个后端服务，但是只能将当前发送的消息通过服务端处理返回到客户端，还不能称为真正意义上的聊天室，这一节带大家进行小小的改造，将聊天功能完善，加上显示所有消息，实时显示有谁进入聊天室和退出聊天室的功能。

我们新建webSocketDemo3文件夹，然后将上节中webSocketDemo2文件夹中的所有文件拷贝进来。

然后index.html代码修改如下：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>websocket</title>
	</head>
	<body>
		<h1>Chat Room</h1>
		<input id="sendText" type="text" />
		<button id="sendBtn">发送</button>
		<div id="recv"></div>
	</body>
	<script type="text/javascript">
		var websocket=new WebSocket("ws://localhost:3000");
		function showMessage(str){
			var div=document.createElement("div");
			div.innerHTML=str;
			document.body.appendChild(div);
		}
		websocket.onopen=function(){
			console.log("websocket open");
			document.getElementById("sendBtn").onclick=function(){
			var txt=document.getElementById("sendText").value;
			if(txt){
				websocket.send(txt);
			}
			
		}
	}
		websocket.onclose=function(){
			console.log("websocket close");
			
		}
		websocket.onmessage=function(e){
			console.log(e.data);
			showMessage(e.data);
		}
		
	</script>

</html>

再将wsServer.js代码内容修改如下：

var ws = require("nodejs-websocket")
var port=3000;
var user=0;

// Scream server example: "hi" -> "HI!!!"
var server = ws.createServer(function (conn) {
	console.log("New connection");
	user++;
	conn.nickname="user"+user;
	broadcast(conn.nickname+" comes in");
	conn.on("text", function (str) {
		console.log("Received "+str)
		//conn.sendText(str.toUpperCase()+"!!!")
		broadcast(str);
	})
	conn.on("close", function (code, reason) {
		console.log("Connection closed");
		broadcast(conn.nickname+" left ");
	})
	conn.on("error", function (err) {
		console.log("handdle error");
		console.log(err);
	})
}).listen(port);
console.log("websocket server listening on port "+port);
function broadcast(str){
	server.connections.forEach(function(connection){
		connection.sendText(str);
	})
}

接下来使用终端cd进webSocketDemo3，然后重新运行以下命令以运行服务：