在前两篇文章中,我们学习了如何使用原生的WebSocket进行客户端和服务器端之间的实时双向通信。但是,原生的WebSocket有一些缺点,比如不支持旧版浏览器、性能不太好等。因此,我们可以使用socket.io这个库来代替原生的WebSocket。
socket.io简介
socket.io是一个基于WebSocket封装的实时通信库,它具有兼容性良好、易用性强以及性能优异等特点。它支持多种传输方式,包括WebSocket、HTTP长轮询、XHR长轮询以及JSONP等。
安装socket.io
我们可以通过npm安装socket.io:
npm install socket.io --save
使用socket.io
服务器端
在服务器端,我们需要创建一个http服务器,并将它作为参数传递给socket.io的构造函数:
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------ - -------------------- ----- -- - ----------------------------- ------------------- -------- -- - -------------- ---- ------------ --- ------------------- -- -- - ---------------------- -- --------- ---
以上代码创建了一个http服务器,并监听3000端口。当有客户端连接到服务器时,会输出"a user connected"。
客户端
在客户端,我们需要引入socket.io-client,并连接到服务器:
<script src="/socket.io/socket.io.js"></script> <script> const socket = io('http://localhost:3000'); socket.on('connect', () => { console.log('connected to server'); }); </script>
以上代码中,我们引入了socket.io-client,并创建了一个socket连接到服务器。当连接成功后,会输出"connected to server"。
发送和接收消息
在socket.io中,消息的发送和接收分别使用emit和on方法。例如,在客户端发送消息:
socket.emit('chat message', 'hello world');
服务器端接收消息:
io.on('connection', (socket) => { socket.on('chat message', (msg) => { console.log(`message: ${msg}`); }); });
以上代码中,客户端通过emit方法发送了一条"chat message"类型的消息,服务器端通过on方法监听这个消息并输出它的内容。
总结
socket.io是一个非常好用的实时通信库,它兼容性良好、易用性强以及性能优异等特点,能够解决原生WebSocket的一些缺点。希望本文对你有所帮助!
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/4033