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


声明:本文转载自https://my.oschina.net/babyanzichen/blog/1574155,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。

上节我们使用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,然后重新运行以下命令以运行服务:

npm install nodejs-websocket

然后客户端运行截图:

终端运行截图:

本文发表于2017年11月16日 00:33
(c)注:本文转载自https://my.oschina.net/babyanzichen/blog/1574155,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 1682 讨论 0 喜欢 0

抢先体验

扫码体验
趣味小程序
文字表情生成器

闪念胶囊

你要过得好哇,这样我才能恨你啊,你要是过得不好,我都不知道该恨你还是拥抱你啊。

直抵黄龙府,与诸君痛饮尔。

那时陪伴我的人啊,你们如今在何方。

不出意外的话,我们再也不会见了,祝你前程似锦。

这世界真好,吃野东西也要留出这条命来看看

快捷链接
网站地图
提交友链
Copyright © 2016 - 2021 Cion.
All Rights Reserved.
京ICP备2021004668号-1