websocket支持全双工通信,也就是客户端和服务端双向通信。以前都是通过http轮询的方式实现实时的,这非常耗性能。Websocket不仅能节省资源和带宽,还能实现长链接的作用
前端通过创建WebSocket对象,然后通过addEventListener方法来监听启动服务(open方法)和接受数据(message方法)
前端准备:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 71%;
height: 500px;
border: 1px solid green;
margin-left: 10px;
}
input {
width: 70%;
height: 30px;
border: 1px solid lightpink;
outline: none;
margin: 10px;
}
button {
width: 100px;
height: 30px;
border: 1px solid lightpink;
color: lightpink;
}
</style>
</head>
<body>
<input type="text">
<button>点击发送</button>
<div class="box"></div>
<script>
var input = document.getElementsByTagName('input')[0]
var btn = document.getElementsByTagName('button')[0]
var box = document.querySelector('.box')
//创建WebSocket对象
var ws = new WebSocket('ws://127.0.0.1:8081')
//启动socket服务
ws.addEventListener('open', function () {
box.innerHTML = '连接服务已启动~'
})
//接收数据
ws.addEventListener('message', function (e) {
box.appendChild(transformMsg(e))
})
//点击按钮发送数据
btn.addEventListener('click', function () {
var value = input.value
input.value = ''
ws.send(value)
})
//生成p标签
function transformMsg(e) {
var data = JSON.parse(e.data)
console.log(data)
var p = document.createElement('p')
p.innerText = data.msg + '---' + data.time
if (data.type === 0) {
p.style.color = 'green'
} else if (data.type === 1) {
p.style.color = 'black'
} else {
p.style.color = 'red'
}
return p
}
</script>
</body>
</html>
后端通过引入nodejs-websocket依赖包,通过conn.on方法来监听消息接收,连接关闭及连接异常
//下载依赖
npm install nodejs-websocket
注意:聊天室的实现需要服务器接收到消息后对消息进行广播来实现,所以会通过server.connections.forEach来逐个发送消息
后端代码:
// 引入nodejs-websocket包
const ws = require('nodejs-websocket')
// 当前所处状态
const type_ENTER = 0 //进入聊天室状态
const type_DATA = 1 //发送信息状态
const type_LEAVE = 2 //离开聊天室状态
var count = 0 //当前用户数量
var server = ws.createServer(function (conn) {
console.log("有用户连接了");
count++
conn.userName = `用户${count}`
brodCast({
type: type_ENTER,
msg: `${conn.userName}进入了聊天室~`,
time: new Date().toLocaleTimeString()
})
// 监听消息
conn.on("text", function (str) {
brodCast({
type: type_DATA,
msg: str,
time: new Date().toLocaleTimeString()
})
})
// 监听连接关闭
conn.on("close", function (code, reason) {
count--
brodCast({
type: type_LEAVE,
msg: `${conn.userName}离开了聊天室~`,
time: new Date().toLocaleTimeString()
})
})
// 监听异常
conn.on('error', () => {
console.log("用户连接异常~");
})
})
// 广播
function brodCast(msg) {
server.connections.forEach(item => {
item.send(JSON.stringify(msg))
})
}
server.listen(8081, () => {
console.log("websocket服务启动成功了~");
})
废话不多说,咱们来看一下效果:
当用户离开时:
websocket不仅可以实现聊天功能,还可以使用解决跨域问题,因为websocket不附属于浏览器的同源策略,而且它本身就有意被设计成可以跨域的一个手段。由于历史原因,跨域检测一直是由浏览器端来做,但是WebSocket出现以后,对于WebSocket的跨域检测工作就交给了服务端,浏览器仍然会带上一个Origin跨域请求头,服务端则根据这个请求头判断此次跨域WebSocket请求是否合法
以上就是关于websocket的介绍,希望能帮到大家 !!!