git 项目地址 gitee.com/aorange98/w…
websocket绑定的事件与方法
new WebSocket(url,[protocol])
url：指定连接的 URL Websocket 使用ws或wss的统一资源标志符，类似HTTPS
protocol：指定了可接受的子协议。
前端的话要需要给这个实例绑定这4个事件和实例化一下 并且与哪个地址建立连接
open close error message
webSocket实例化后ws有两个方法
Socket.send() 使用连接发送数据
Socket.close() 关闭连接
客户端：两个页面： entry.html --> 用户输入用户名的页面 index.html --> 发送的页面
entry.html
用户名：<input type="text" id="oinput">
<button id="btn">进入聊天室内</button>
btn.onclick = function () {
if (oinput.value.length < 5) {
alert("请输入不小于5位的用户名")
} else {
// 本地存用户名
localStorage.setItem('username', oinput.value)
// 存储完后跳转到index页面
location.href = 'index.html'
}
}
index.html
let ws = new WebSocket('ws:localhost:8500');
let username = "";
let content = ""; // 内容
// 点击事件 发送数据给服务器
oId.addEventListener('click',()=>{
let message = oIpt.value // 获取输入的这个数据
let timestamp = new Date().getTime() // 获取发送的时间戳
// 如果是空值 啥都不干
if(message == ""){
return
}
// 这样子传递是不行的 像这种文本的需要让他变成字符串
// ws.send({
// username, // 用户名
// data, // 数据
// timestamp, // 时间戳
// })
// 所以应该如下写法
ws.send(JSON.stringify({username,message,timestamp}))
// 发送完后 清空输入框
oIpt.value = ""
})
// open 事件 --- 进来之后 与服务器链接后就会触发
// 打开WebSocket连接后可以在open事件中立刻发送一条消息
ws.addEventListener("open",(e)=>{
console.log("open",e)
username = localStorage.getItem('username')
// 如果没有用户名字 那么返回进入页
if(!username){
location.href = "entry.html"
}
})
// close 事件
ws.addEventListener("close",(e)=>{
console.log("close",e)
})
// error 事件
ws.addEventListener("error",(e)=>{
console.log("error",e)
})
// message 事件 --- 在这接收服务端广播返回来的信息
ws.addEventListener("message",(e)=>{
console.log("message",e.data)
renderPage(JSON.parse(e.data))
})
function renderPage(msg){
var dom = `
<ul id="list">
<li>
<div style="font-weight:800">
<span id="username">${msg.username}</span> --- <span id="time">${new Date(msg.timestamp).toLocaleString()}</span>
</div>
<div id="content">${msg.data}</div>
</li>
</ul>
`
const oDiv = document.createElement('div')
oDiv.innerHTML = dom
document.getElementById('wrap').appendChild(oDiv)
}
后端
// 导入WebSocket模块:
const WebSocket = require('ws');
console.log(WebSocket)
// 引用server类 就是说真正的服务在大对象中的Server
const WebSocketServer = WebSocket.Server;
// ws:localhost:8500
const server = new WebSocketServer({
port:8500
})
// console.log(server)
// open 事件
server.on('open',()=>{
console.log("webSocket open")
})
// 绑定close 事件
server.on('close',()=>{
console.log("webSocket close")
})
// 绑定error 事件
server.on('error',()=>{
console.log("webSocket error")
})
// 绑定connection 事件
// 如果有WebSocket请求接入，server对象可以响应connection事件来处理这个WebSocket：
server.on('connection',(ws)=>{
console.log("connection 只要有人连接，那么我就会被触发，有人进来了");
// 在这里面绑定message 事件 msg是前端发送过来的数据
// 接收前端传递的数据,最终需要广播出去给每一个客户端
ws.on('message',(msg)=>{
console.log("message")
console.log(msg)
// 那到底如何广播出去呢？server.clients 记录着保存所有连接到server上的客户端
// 通过forEach遍历得到每一个用户
server.clients.forEach(item=>{
// item下有个send方法，把这msg广播出去再返回给前端 前端在message事件处理函数中就会收到
item.send(msg)
})
})
})
