node-Socket编程
全双工通信,主要基于服务端推送技术实现
可以实现实时聊天,就比如qq群,同学A发出消息,群里的其他同学可以实时看到消息
node.js中可以依靠原生模块net实现Socket编程,在H5的浏览器里面可以借助ws模块实现websocket实现实时通信编程
创建服务器,在控制台下载ws模块
yarn add ws
server.js
const WebSocket = require("ws").Server;
const ws = new WebSocket({
port:9000
})
let clientMap = {}
let i = 0
//监听客户端连接
ws.on("connection",client=>{
client.name = ++i
clientMap[client.name] = client
//接受客户端发送来的消息,然后进行广播,服务端推送消息给所有的客户端对象
client.on("message",data=>{
broadCast(client,data)
})
client.on("error",()=>{
console.log(client.name+"下线了...")
})
})
//可以让服务端做一个广播的效果,将具体client发送的message传送给所有的客户端对象
function broadCast(client,data){
for(let key in clientMap){
clientMap[key].send(client.name+"说的:"+data)
}
}
创建客户端Client.js
//创建客户端实例
const ws = new WebSocket("ws://localhost:9000")
//客户端向服务端发送消息
ws.onopen = ()=>{
ws.send("大家好!")
}
//客户端接受服务端发送消息
ws.onmessage = data =>{
document.querySelector("#content").innerHTML += data.data+"<br/>"
}
//客户端可以监听服务端关闭,触发此方法
ws.onclose = ()=>{
console.log("服务器关闭了...")
}
在前端index.html引入客户端文件
<!--引入客户端文件-->
<script src="./Client.js"></script>
通过nodemon Servr.js指令开启服务 然后打开index.html页面,控制台输入ws
<body>
<h1>websokect实现在线聊天室</h1>
<div id="content" style="400px;height:400px;border:1px solid #ccc"></div>
<input type="text" id="msg" style="200px">
<button id="submit">提交</button>
<script>
//点击提交,获取输入框的值,然后通过ws将其发送给服务端,然后服务端进行推送广播给客户端
document.querySelector("#submit").addEventListener("click",()=>{
let myValue = document.querySelector("#msg").value;
//需要将myValue发送给服务端
ws.send(myValue)
})
</script>
</body>