HTML5之WebSocket入门3 -通信模型socket.io

阅读时长 3 分钟读完

在前两篇文章中,我们学习了如何使用原生的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

纠错
反馈