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