在开发websocket的时候,我们可能会用到socket.io这个库,来看一下这个库的简答应用,先看一个简单的案例,服务端代码:
代码语言:javascript复制const express = require('express');
const http = require('http');
const io = require('socket.io');
const app = express();
app.use(express.static("./"))
const server = http.Server(app);
const socketServer = new io.Server(server);
socketServer.on('connection', (socket) => {
//监听connection(用户连接)事件,socket为用户连接的实例
socket.on('disconnect', () => {
//监听用户断开事件
console.log("用户" socket.id "断开连接");
});
console.log("用户" socket.id "连接");
setInterval(() => {
socket.emit('msg', '你好浏览器');
}, 1000)
socket.on('msg', (data) => {
//监听msg事件(这个是自定义的事件)
console.log(data);//你好服务器
//向socket用户发送信息
})
})
server.listen(3000);
梳理代码,以上代码完成了如下功能:
1、导入socekt.io得到io函数
2、结合express和http库创建web服务器server
3、用io函数和web服务器server创建socket服务器socketServer。
以上三步基本是websocket服务端框架的大致思路。
然后socketServer监听连接事件,当用户访问webserver时同时会连接socketserver。在回调函数中我们得到了前后端通信的socekt。
通过socket我们可以监听和发送信息,这里有点类似发布订阅者模式,socket内部会自动维护事件名称。
这里需要注意的是,使用socket的emit方法发送信息是单线的,一对一,除了emit,socket上还有broadcast属性可以使用emit方法,broadcast的emit是广播形式的发送信息,除了自己之外的所有客户端都会接收到信息。另外一个是socketServer也可以使用emit方法,socketServer调用emit方法后,所有客户端都会接收到信息,包括自己。
接下来看一下客户端代码:
代码语言:html复制<!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>
<!-- <script crossorigin="anonymous"
integrity="sha512-ZqQWGugamKhlSUqM1d/HMtwNG hITmd/ptoof91lt5ojFZ 2bKlkvlzkmnDIrnikDY UDVZVupLf6MNbuhtFSw=="
src="https://lib.baomitu.com/socket.io/3.1.0/socket.io.min.js"></script> -->
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
//向指定的服务器建立连接,地址可以省略
//自定义msg事件,发送‘你好服务器’字符串向服务器
setTimeout(()=>{
console.log(999)
socket.on('msg', (data) => {
socket.emit('msg', '你好服务器');
//监听浏览器通过msg事件发送的信息
console.log(data);//你好浏览器
});
},3000)
</script>
</body>
</html>
这里需要注意的是:通过socket.io搭建的websocket服务器,只能和socket.io配套的前端库一起使用,此时不能在使用原生的websocket接口代码。
还有就是在引入前端库时可以直接使用这个地址/socket.io/socket.io.js。因为搭建起websocket服务器后,服务器会默认发布这个资源。
调用io函数时可以不用传递参数,但是如果使用我不cdn的socket.io.js的话就需要传递地址了。
以上便是使用socket.io搭建websocket服务器的简单使用,希望对你有所帮助。