H5网页版聊天之websocket

最新推荐文章于 2024-07-26 07:10:36 发布

QQ帝国

最新推荐文章于 2024-07-26 07:10:36 发布

阅读量1.6k

点赞数 1

分类专栏： Node

本文链接：https://blog.csdn.net/QQ_Empire/article/details/81747461

版权

Node 专栏收录该内容

45 篇文章 1 订阅

订阅专栏

1、首先安装ws模块：

安装命令：npm init

npm i ws -D

2、在server.js引入 var wsserver = require('ws').Server

server.js文件

//服务器文件
var wsserver = require('ws').Server;
var wss=new wsserver({port:3000})
var clientObject={}
//流水账号--区分服务器上的客户端
var i=0;
//链接
wss.on('connection',(client)=>{
	client.name=++i;
	clientObject[client.name]=client
	client.on('message',(data)=>{
		console.log('客户端发来：'+data)
		
		huifu(client,data)
	})
})
function huifu(client,message){
//	client.write('服务器收到')
	
	for (let i in clientObject) {
		clientObject[i].send(client.name+"说："+message)
	}

}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	
	#con{
		width: 600px;
		height: 500px;
		border: 1px solid red;
	}
</style>
</head>
<body>
	
	<h1>H5通信</h1>
	<div id="con"></div>
	
	<input type="text" id="ipt" />
	<button id="btn">发送</button>
	
</body>
<script type="text/javascript">
//	客户端
	var client=new WebSocket('ws://localhost:3000')
	client.onopen=function(){}
	
	client.onmessage=function(a){
//		a.data
		document.getElementById("con").innerHTML+='<p>'+a.data+'</p>';
	}
	
	document.getElementById("btn").onclick=function(){
		client.send(document.getElementById("ipt").value)
	}
	
</script>
</html>