websocket(一)
WebSocket (即时通讯)是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据
1.基本方法使用(H5)
<body>
<input type="text" name="" id="">
<button>发送</button>
<div></div>
</body>
// 1:创建socket服务 ws://localhost:3000本地自建的socket服务员
var socket = new WebSocket("ws://localhost:3000")
//2:open连接到websocket服务时触发
socket.addEventListener("open",()=>{
div.innerHTML="websocket已连接!!!"
})
btn.onclick=function(){
var value= ipt.value
//3: send 主动向websocket发送信息
socket.send(value)
ipt.value=""
}
//4:接收websocket返回的消息
socket.addEventListener("message",function(e){
var p=document.createElement("p")
p.innerHTML= e.data
div.appendChild(p)
)
2.websocket服务端(node)
在node中安装依赖包nodejs-websocket
//1:加载依赖包
const ws =require("nodejs-websocket")
const PORT=3000;
let count = 0;
//2.0:创建一个server服务
//2.1:如何处理请求用户连接
//每次只要有用户连接 函数就会被执行,会给当前连接的用户创建一个connect对象
const server = ws.createServer(connect=>{
count++
var userName = `用户${count}`
broadcast(`${userName}进入了聊天室`)
console.log(userName+"进入聊天室")
//注册一个text方法 用来接收用户发来的消息数据
connect.on("text",data=>{
console.log(data)
// send websocket向用户返回一个信息
// connect.send(data)
// 向每个用户发送发送消息
broadcast(userName+":"+data)
})
// 只要websocket断开连接 close事件就会触发
connect.on("close",data=>{
count--
broadcast(`${userName}离开聊天室`)
console.log(userName+"离开聊天室")
})
// 注册一个error 处理用户的错误信息
connect.on("error",()=>{
console.log("用户连接异常")
})
})
server.listen(PORT,()=>{
console.log("websocket服务启动成功,监听端口号为"+PORT)
})
// node里面的一个广播方法
//server.connections 表示所有的用户
function broadcast(message){
server.connections.forEach(function(conn){
conn.send(message)
})
}