NodeJS聊天室

 

跟着教学视频了解到websocket和socket.io的通信方法之后，自己写了一个交互效果更好的聊天室。

 

▍小插曲

2019.1.24：今天在聊天室后台无意间看到了这样一段聊天，希望这位名叫luke所说的是假的，如果是真的，请相信，这世界上还有更好的人在等着你。

 

▍演示效果

 

▍实现过程（Windows系统）

1、在nodeJS中文网下载nodeJS客户端并安装；

2、在桌面（未知可自选）创建一个项目文件夹用于存放相关文件；

3、打开新建的文件夹，创建chatRoom.html文件和server.js文件；

4、打开命令行窗口，找到这个文件夹后，输入【npm i socket.io】，此时将在该文件夹中生成了一个新的文件夹，这是刚刚下载的socket.io相关依赖包；

5、将代码补充到chatRoom.html文件和server.js文件中；

6、打开命令行窗口，找到该项目文件夹后，输入【node server.js】并【Enter】。

7、保持窗口在运行状态，不要关闭！！！

 

▍有待完善的地方

1、没有实现动态的分配身份；

2、界面可再优化；

3、前台向后台发送中文姓名时会出现乱码（找了两天资料都没有搞定，跪求大佬指教）。

 

▍server.js

// 引入http标准模块,CommonJS模块
const http = require("http");
const fs = require("fs");
const ws = require("socket.io");
// 当前在线人数
let count = 0;
// 总访客人数
let totalCount = 0;

// 创建一个web服务器
const server = http.createServer(function(request, response) {
	response.writeHead(200, {
		"Content-Type": "text/html;charset=UTF-8"
	});
	// 可发送文本
	// response.end("hello world");

	// 可自动解析html
	// response.end("
我是标题2
");

	// 读取文件
	const html = fs.readFileSync("index.html");
	response.end(html);

});

// 基于当前web服务器开启socket实例
const io = ws(server);

// 检测连接事件
io.on("connection", function(socket) {

	// console.log("当前有用户连接");
	count++;
	totalCount++;
	// console.log("count:" + count);

	let name = '';

	// 给公众发送上线信息
	//	socket.broadcast.emit("connection", {
	//		count: count,
	//		id: count
	//	});

	// 给自己发送上线信息
	//	socket.emit("connection", {
	//		count: count,
	//		id: totalCount
	//	});

	// 加入群聊
	socket.on("join", function(message) {
		console.log(message);
		name = message.name;
		// console.log(name + "加入了群聊");
		socket.broadcast.emit("joinNoticeOther", {
			name: name,
			action: "加入了群聊",
			count: count
		});
		socket.emit("joinNoticeSelf", {
			count: count,
			id: totalCount
		});
	});

	// 接收客户端所发送的信息
	socket.on("message", function(message) {
		console.log(message);
		// 向所有客户端广播发布的消息
		io.emit("message", message);
	});

	//	 监听到连接断开
	socket.on("disconnect", function() {
		count--;
		// console.log(name + "离开了群聊")
		io.emit("disconnection", {
			count: count,
			name: name
		});
	});

});

// 服务器监听端口
server.listen(3000);
console.log('Server has started.\n')

 

▍chatRoom.html

	
	
	




	


		
		

			
			

				
			

			
			
姓名

			
			

				
尬聊模式
				
“讲个笑话”
				
“歇后语”
				
“顺口溜”
				
“北京天气”
				
“名人名言”
				
“静夜思”
			

			

				如果您有什么好的页面设计方案，请将您的设计稿发送至 [email protected] ，非常感谢！
			
		

		
		

			
			
聊天室(0)

			
			

				

					

						

							
						
						

							
机器人
							
你好呀，小主人，欢迎来到TAchat。
						
					
				
				

					

						

							
						
						

							
机器人
							

								

									

										
您可尝试输入以下指令：
									
									

										
1、讲个笑话
									
									

										
2、歇后语
									
									

										
3、顺口溜
									
									

										
4、xx天气
									
									

										
5、名人名言
									
									

										
6、诗词
									
									

										
……
									
								
							
						
					
				
				

					

						

							
						
						

							
机器人
							
还可以邀请小伙伴打开本网址与您一起聊天呢！
						
					
				
			

			
			

				

					
					
0/30
				
				
发送