前言
数据（包括股票、天气和体育比分）在不断更新为新信息时最为有用 。SpreadJS是一个非常通用的 JavaScript 电子表格组件，它还可以轻松地使用、显示并通过数据绑定提供实时数据更新 。我们将使用WebSocket从Finnhub.IO获取实时数据 ， 然后使用基本的 SpreadJS 功能来展示数据 。要使用 Finnhub Stock API，您需要创建一个免费帐户并生成您的 API 密钥，我们稍后将在该应用程序中使用该密钥 。
在本教程中，我们将使用 Node.JS Express 和 WebSocket，因此请确保安装最新版本 。我们还将使用 Visual Studio Code，因此以管理员身份运行它，以便 NPM 命令可以在终端中运行 。
在此文中，我们将介绍如何按照以下步骤将实时数据合并到 JavaScript 电子表格中：
- 设置应用程序
- 连接到数据源
- 使用 SpreadJS 中的数据
- 为折线图添加数据
- 添加折线图
- 运行程序
应用设置
我们可以从为应用程序创建一个文件夹开始 。在这种情况下 ， 我们将其命名为“实时数据” 。接下来，需要在该文件夹中创建一个 package.json 文件，用作项目的清单文件 。这可能包含类似于以下的内容：{"name": "real-time-data","version": "0.0.2","description": "An app that imports real-time data into Spread JS","dependencies": {}}对于这个应用程序，我们将使用 Express 作为 Web 框架和 WebSockets 来获取实时数据，我们可以简单地使用 npm 安装它，也将使用它来安装 SpreadJS 文件 。在 Visual Studio Code 终端中，您可以键入：
npm install --save express@4.18.2 finnhub websocket @grapecity/spread-sheets @grapecity/spread-sheets-charts一旦安装成功，就可以创建一个名为“index.js”的文件来设置应用程序，其中会包含以下内容：
var express = require('express');var app = express();var http = require('http').Server(app);app.use('/node_modules', express.static('node_modules'));// Add code herehttp.listen(3000, function(){console.log('Stock Ticker Started, connect to localhost:3000');});现在就可以添加应用程序到 HTML 文件中 。在这种情况下，我们可以将文件命名为“index.html” 。然后继续向HTML 文件添加一些代码 ， 包括对 SpreadJS 脚本和 CSS 引用以及一些基本的初始化代码：
Real Time Data