websocket作为即时通讯的利器，相对于Ajax轮询性能优化何止甩一条大街！本着上班摸鱼的态度，也是时候研究一下这个好玩的东西了！
如果有看到该文章的小伙伴们，麻烦加一下关注及小爱心点一点，非常感谢！！！ 注意点的是以下的知识需要你对
有一定的了解，废话少说，来吧少年！ 
技术要点：NodeJs、nodejs-websocket、js
一、因为此次的websocket纯前端语言，所以需要建两个文件 一个作为客户端 用于用户访问、一个作为服务端 用户服务器反馈信息。
1.初始化你的包 npm init -y
2.npm install nodejs-websocket -D (这里喜欢用yarn或者cnpm安装的都行)
// 1.服务端 server.js
const ws = require("nodejs-websocket")
// socket服务端口
const port = 8888
// 创建一个玩家进入标识
const enter_user = 0
// 创建一个玩家离开的标识
const live_user = 1
// 创建一个发送消息的标识
const send_user = 2
// 计数用户进入房间
var personNumber = 0
// 创建一个serve服务
const server = ws.createServer(function (connect) {
console.log('有用户进来了')
// 附加connect对象 作为当前用户信息
personNumber++
connect.userName = `玩家${personNumber}`
// 开始广播信息 让所有玩家知道你大驾光临！
broadcast({
type:enter_user,
userName:connect.userName,
content:'',
time:new Date().toLocaleTimeString()
})
// 处理用户发送的信息 text
connect.on("text", data=>{
/*
处理用户信息 然后返回 单一处理不含广播
connect.send(data)
*/
// 开始广播你的龙言
broadcast({
type:send_user,
userName:connect.userName,
content:data,
time:new Date().toLocaleTimeString()
})
})
// 连接断开 会触发
connect.on("close", ()=>{
// 对于你的离开做一次广播，这可是VIP待遇
personNumber--
broadcast({
type:live_user,
userName:`${connect.userName}已离开房间`,
content:'',
time:new Date().toLocaleTimeString()
})
})
// 处理error事件
connect.on("error", ()=>{
console.log('处理error事件,连接异常！')
})
})
// 处理消息广播
function broadcast(msg) {
// websocket 只能接受字符串及buffer类型 需要转换一下
server.connections.forEach(function (conn) {
conn.sendText(JSON.stringify(msg))
})
}
// 监听端口
server.listen(port,()=>{
console.log('服务',port)
})
//2 客户端
<!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">
<button>发送</button>
<div></div>
</body>
<style>
*,body,html{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.color0{
color: 24px;
color: green;
}
.color1{
color: 24px;
color: red;
}
.color2{
color: 24px;
color: rgb(247, 0, 255);
}
</style>
<script>
var input = document.querySelector('input')
var button = document.querySelector('button')
var div = document.querySelector('div')
var Ul= document.createElement('ul')
var Socket = new WebSocket('ws://localhost:8888')
Socket.addEventListener('open',function(){
div.innerHTML = '已成功偷窃该房间！'
})
button.addEventListener('click',function(){
Socket.send(input.value)
input.value = ''
})
Socket.addEventListener('message',function(e){
var str = ''
var Li = document.createElement('li')
str +=`<div> <p class='color${JSON.parse(e.data).type}'>${JSON.parse(e.data).userName}--------<span class='color${JSON.parse(e.data).type}'>${JSON.parse(e.data).time}</span></p> <p class='color${JSON.parse(e.data).type}'>${JSON.parse(e.data).content}</p></div>`
Li.innerHTML = str
Ul.appendChild(Li)
div.appendChild(Ul)
})
</script>
</html>
//3 进入你服务端开启node服务
node server.js 或者nodemon server.js
网友评论