Vercel 巧妙的设置答案

【问题标题】：Vercel ably setupVercel 巧妙的设置
【发布时间】：2020-12-10 13:09:45
【问题描述】：

我是 vercel 的新手，我正在尝试部署一个包含聊天功能的应用程序。我正在使用 ably.com 作为发布/订阅聊天功能。我正在尝试巧妙地使用实时来发布和订阅事件，但是 API 中的发布事件会以某种方式引发错误。我检查了文档并正确编码。

相同的代码在 localhost 上运行良好，但一旦我将其部署到 vercel，它就无法运行并引发错误。

我正在使用以下代码从 API 发布消息。

var realtime = new Ably.Realtime('<Ably key>');
var channel = realtime.channels.get('ham-gym-tag');
channel.publish('example', 'message data');

【问题讨论】：

忘了说我在我的项目中使用nextJS

标签： javascript deployment vercel ably-realtime

【解决方案1】：

我在部署过程中遇到了类似的问题。这里的问题是使用 ABLY REST API (https://www.ably.io/documentation/rest) 发送/发布消息并使用 ABLY Realtime 订阅事件。这样，您甚至不需要编写 API。您可以通过 Axios 或类似的 npm 包直接调用 Ably REST API。

调用以下方法将消息发送/发布给 ABLY

const onSave = async () => {
let data = { name: "greeting", data: msg };
const res = await axios({
  method: "POST",
  headers: {
    Authorization:
      "Basic " + new Buffer(process.env.ABLY_CLIENT_ID).toString("base64"),
    "Content-Type": "application/json",
  },
  url: "https://rest.ably.io/channels/<channel name>/messages",
  data: data,
});
};

请注意，您必须将替换为您的频道名称，并将 ABLY_CLIENT_ID 替换为您的 ABLY 客户 ID。在上面的代码中，'name: "Greeting"' 定义了您将发布消息的事件名称。现在您可以在要订阅“问候”事件的文件中编写以下代码

useEffect(() => {
var ably = new Ably.Realtime(process.env.ABLY_CLIENT_ID);
const channelAbly = ably.channels.get(<channl name>);
channelAbly.subscribe("greeting", function (message) {
  // console.log("message received for event " + message.name);
  // console.log("message data:" + message.data);
});
}, []);

请注意，您必须将替换为您的频道名称，并将 ABLY_CLIENT_ID 替换为您的 ABLY 客户 ID。另外，如果需要，请将偶数名称从“Greeting”更改为其他名称。

只要有新消息发布到带有“greeting”事件的频道，就会触发上述代码。

【讨论】：