基于node.js + websocket实现群聊demo

最新推荐文章于 2023-09-13 21:14:54 发布

qq8344310

最新推荐文章于 2023-09-13 21:14:54 发布

阅读量241

点赞数

本文链接：https://blog.csdn.net/qq8344310/article/details/98472383

版权

node需要安装的文件

npm install koa koa-router fs http socket.io websocket -S

各文件目录结构

在这里插入图片描述

各文件代码

首先，声明:需要bootstrap和jQuery，需要事先下载好放在上图的css和js文件中。

server.js（服务端）

const koa = require('koa');
const app = new koa();

const fs = require('fs');

const router = new require('koa-router')();

const static = require('koa-static');

const server = require('http').createServer(app.callback());

const io = require('socket.io')(server);

//socket服务器监听连接 表示建立连接
io.on('connection', socket => {

	// setInterval(function(){
		io.emit('msg','hello!');
	// },1000);

	// //向某个客户端推送消息
	// socket.emit('request', 

	// );
	// //向所有客户端推送消息
	// io.emit('broadcast',
		
	// );
	// //监听发送接收事件
	socket.on('send', (data) => {
		io.emit('msg',data);
	});
});

// 开放静态资源目录
app.use(static(__dirname+'/view/'));

// 读取聊天文件
fs.readFile(__dirname + '/view/index.html',function(err,data){
	router.get('/',function(ctx){
		ctx.body = data.toString();
		// console.log(data.toString());
	})
});

app.use(router.routes(),router.allowedMethods());

server.listen(3000,()=>{
    console.log('连接成功');
});

index.html（客户端）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>聊天室</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<style type="text/css">
.margint10{
	margin-top: 10px;
}
.marignl{
	margin-left: 30px;
}
.box{
	border: 2px solid #ccc;
	width: 100%;
	height: 200px;
	padding: 10px;
	overflow: auto;
}
.chat_other{
	display: flex;
} 
.chat_other .o{
	padding: 6px 20px;
	background: #337ab7;
	border-radius: 50%;
	color: white;
	font-weight: 600;
}
.chat_other .s{
	margin-left: 20px;
	background: #eee;
	padding: 6px 20px;
}
.chat_me{
	display: flex;
	flex-direction: row-reverse;
} 
.chat_me .o{
	padding: 6px 20px;
	border-radius: 50%;
	background: #5cb85c;
	color: white;
	font-weight: 600;
	margin-left: 20px;
}
.chat_me .s{
	margin-left: 20px;
	background: #eee;
	padding: 6px 20px;
}
.wd{
	width: 100%;
	height: 60px;
	resize:none;
}
</style>
<body style="padding:5px;">
<div class="container-fluid">
	<div class="row">
	  	<div class="col-lg-10">
	    	<div class="input-group">
	      		<span style="line-height:30px;">姓名：</span><input type="text" class="form-control ipt">
		      <div class="input-group-btn">
		        <button class="btn btn-primary marignl" id="send">提交</button>
		      </div>
	    	</div>
	    	<div class="box margint10">
	    	</div>
	    	<div class="chat margint10">
	    		<textarea class="text wd"></textarea>	
		        <button class="btn btn-primary" disabled id="show-btn">提交</button>
	    	</div>
	  </div>
	</div>
</div>

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>


<!-- 必不可少 -->
<script src="/socket.io/socket.io.js"></script>

<script>
window.onload = function(){
  //链接服务器 
  var socket = io.connect('ws://localhost:3000');
  //链接服务器回调
  socket.on('connect', function(){
  	console.log('连接成功');
  });
  socket.on('msg', function(data){
	  if(data.name) {
		if(data.name == $('.ipt').val()) {
			// 添加一个节点
			$('.box').append(`
					<div class="chat_me">
						<span class="o">我</span>
						<div class="s">${data.msg}</div>
					</div>
			`);
		}else{
			// 添加一个节点
			$('.box').append(`
					<div class="chat_other">
						<span class="o">${data.name}</span>
						<div class="s">${data.msg}</div>
					</div>
			`);
		}
	  }
  });
  socket.on('disconnect', function(){
  	console.log('断开连接');
  });
	$('#send').click(function(){
		// 提交了姓名，发送框才能发送消息
		if( $.trim($('.ipt').val())=="" ) {
			alert('请输入姓名！');
			return;
		};
		$('#show-btn').attr("disabled",false);
	})
	// 向服务端发送一条消息对象，包括姓名和内容
	$('#show-btn').click(function(){
		socket.emit('send',{
			name: $('.ipt').val(),
			msg: $('.wd').val()
		});
		// 发送消息后清空发送消息框里面的文字
		$('.wd').val('');
	})
}
</script>
</body>
</html>