前言
Socket.IO是一个库,基于 Node.js 的实时应用程序框架。可以在浏览器和服务器之间实现实时,双向和基于事件的通信。它适用于每个平台、浏览器或设备,同样注重可靠性和速度。它包括:
- Node.js 服务器
- 浏览器的Javascript客户端库(也可以从Node.js运行)
WebSocket 的产生源于 Web 开发中日益增长的实时通信需求,对比基于 http 的轮询方式,它大大节省了网络带宽,同时也降低了服务器的性能消耗。
WebSocket 协议在2008年诞生,2011年成为国际标准。虽然主流浏览器都已经支持,但仍然可能有不兼容的情况,为了兼容所有浏览器,就诞生SocketIO。
SocketIO将WebSocket、AJAX和其它的通信方式全部封装成了统一的通信接口,也就是说,我们在使用SocketIO时,不用担心兼容问题,底层会自动选用最佳的通信方式。
SocketIO使用手册https://socket.io/docs/v4/handling-cors/
一、安装Socket.IO
npm init -y
npm install socket.io
二、使用场景
两个客户端互相通信
2.1、模拟服务端
const { createServer } = require("http");
const { Server } = require("socket.io");
const httpServer = createServer();
const io = new Server(httpServer, {
cors: { //解决跨域问题
origin: "*",
methods: ["GET", "POST"]
}
});
io.on("connection", (socket) => {
// 自定义接收消息事件
socket.on('sendMsg',(data) => {
console.log(data)
// 定义发送消息事件
// io表示广播出去,发送给全部的连接
io.emit('pushMsg',"服务端返回的消息:"+data)
})
});
httpServer.listen(3000,function(){
console.log('http://127.0.0.1:3000')
});
2.1、模拟客户端
<!DOCTYPE html>
<html lang="en">
<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>
<!-- socketio提供的客户端 -->
<script
src="https://cdn.socket.io/4.4.0/socket.io.min.js"
integrity="sha384-1fOn6VtTq3PWwfsOrk45LnYcGosJwzMHv+Xh/Jx5303FVOXzEnw0EpLv30mtjmlj"
crossorigin="anonymous">
</script>
</head>
<body>
<input type="text" id="text">
<input type="button" value="发送" onclick="send()">
<script>
// 直接建立连接
var socket = io.connect('http://127.0.0.1:3000')
function send(){
var text = document.getElementById('text').value
// 发送消息
socket.emit('sendMsg',text)
}
// 接收服务端的消息
socket.on('pushMsg',(data) => {
console.log(data)
})
</script>
</body>
</html>