在现代 Web 应用程序中，实时性已成为一个非常重要的要素。为了不必反复询问服务器，以及确保数据的同步性，WebSockets 技术日益受到注意。本文将介绍如何在 Vue.js 中使用 WebSockets，以处理实时数据。
WebSockets
WebSockets 是 HTML5 的新功能，它提供了一种通过单个 TCP 连接实现全双工通信的方式，从而使客户端与服务器之间的实时通信变得更加容易。WebSockets 基本上允许客户端与服务器之间通过一个持久连接进行双向通信，而不需要在每个消息之后建立新连接。
Vue.js
Vue.js 是一个流行的 JavaScript 框架，被用于开发单页面应用程序，前端开发者们都很喜欢使用它。Vue.js 提供了许多功能，例如组件化、状态管理和指令，使得构建应用程序变得更加容易。
使用 WebSockets 处理实时数据
要使用 WebSockets 处理实时数据，需要使用 WebSocket 对象。在 Vue 实例中，可以像这样创建 WebSocket 对象：
var socket = new WebSocket('ws://localhost:8080');在连接 WebSocket 之前，需要先处理其打开、关闭和消息事件。Vue 中提供了生命周期钩子，以便处理这些事件：
-- -------------------- ---- -------
--- -- - --- -----
--- -------
-------- -------- -- -
----------- - --- ---------------------------------
------------------ - -------- -- -
---------------------- -- ------------
--
--------------------- - -------- ------- -
--------------------- ---------- ------------
--
------------------- - -------- -- -
------------------------- ---- ------------
--
--接下来，就可以通过发送 WebSocket 消息来更新 Vue 实例了。这里给出一个例子：
methods: {
sendMessage: function () {
this.socket.send('Hello, World!');
}
}
})可以看到，会在 WebSocket 中发送 "Hello, World!" 这个消息。
当 WebSocket 服务器端发送消息时，Vue.js 需要更新其组件的状态。这可以通过使用 Vue 组件的计算属性来实现：
computed: {
message: function () {
return this.socket.readyState === WebSocket.OPEN ?
'Connected to WebSocket' :
'No WebSocket connection';
}
}以上代码中，我们使用计算属性 message 来更新组件的状态，以显示当前与 WebSocket 的连接情况。
示例代码
接下来，我们以一个简单的实时聊天应用为例来示范如何使用 Vue.js 和 WebSockets 来处理实时数据。
前端代码
-- -------------------- ---- -------
----------
-----
---------- -------- ---------
------- ------- --------
-----
------ ---------------------- -------------
------- ------------------------------------
------
-----
----
--- ---------- -- ----------------------
-----
------
------
-----------
--------
------ ------- -
------ -
------ -
------------- ---
--------- ---
------- ----
-
--
--------- -
----------- - --- ---------------------------------
------------------ - -- -- -
---------------------- -- -------------
--
--------------------- - ------- -- -
-------------------------------
--
------------------- - -- -- -
------------------------- ---- -------------
--
--
--------- -
-------- -------- -- -
------ ---------------------- --- -------------- -
---------- -- ----------- -
--- --------- -------------
-
--
-------- -
------------- -
-- ------------------- -
------------------------------------
----------------- - ---
-
-
-
--
---------后端代码
对于后端服务器，我们将使用 Node.js 的 ws 库来创建一个 WebSockets 服务器。以下是这个服务器的代码：
-- -------------------- ---- -------
----- --------- - --------------
----- ---- - -----
----- --- - --- -------------------------
------------------- ------- -- ---- -----------
-------------------- ---- -- -
------------------- -------------
---------------- --------- -- -
--------------------- -------- -------------
---------------------------- -- -
-- ------------------ --- --------------- -
---------------------
-
---
---
-------------- -- -- -
------------------- ----------------
---
---------------- -- --- --------- ----------
---以上代码会在 8080 端口启动一个 WebSocket 服务器，当一个客户端连接到该服务器时，它会发送一条欢迎消息。当接收到一个客户端消息时，它会将该消息广播到所有客户端。
结论
在本文中，我们介绍了如何在 Vue.js 中使用 WebSockets 处理实时数据。我们以一个简单的聊天应用为例，演示了如何在前端和后端建立 WebSockets 连接，以便实时通信。这些技术有望帮助您构建更加高效的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6705eb9bd91dce0dc855dda3