nodejs-websocket实现简易广播

最新推荐文章于 2022-12-31 00:58:05 发布

懵懂的程序员小曲

最新推荐文章于 2022-12-31 00:58:05 发布

阅读量2.2k

点赞数 1

文章标签： js websocket

本文链接：https://blog.csdn.net/weixin_43695464/article/details/106525183

版权

首先安装依赖

npm install nodejs-websocket --save

服务端部分

	const ws = require('nodejs-websocket') //引入nodejs-websocket
	const server = ws
		.createServer((conn) => {
			console.log('ok')
			conn.on('text', (str) => {   //接受客户端传来的消息
				broadcast(str)
			})
			conn.on('error', (err) => {  //判断错误，假如不判断的话 会断开连接
				console.log(err)
			})
		})
		.listen(3000)
	function broadcast(data) {
	 //所有的窗口都储存在connections里面，所以用循环把消息发给所有的窗口 
		server.connections.forEach((conn) => { 								
			conn.sendText(data)  //sendText 服务端发送给客户端方法
		})
	}

html部分

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<input type="text" id="msg" />
		<button id="send">发送</button>
		<div id="container"></div>
		<script>
			const ws = new WebSocket('ws://localhost:3000')
			let container = document.getElementById('container')
			ws.onopen = function () {
				document.getElementById('send').onclick = () => {
					let data = document.getElementById('msg').value
					ws.send(data)   //发送给服务端信息
				}
			}
			ws.onmessage = function (e) {
				let p = document.createElement('p')
				p.innerHTML = e.data    //接受来自服务端的信息
				container.appendChild(p)   //在html插入元素 显示来自服务端的信息
			}
		</script>
	</body>
</html>

懵懂的程序员小曲

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
nodejs-websocket实现简易广播

首先安装依赖npm install nodejs-websocket --save服务端部分 const ws = require('nodejs-websocket') //引入nodejs-websocket const server = ws .createServer((conn) => { console.log('ok') conn.on('text', (str) => { //接受客户端传来的消息 broadcast(str) })
复制链接

扫一扫