Vercel 巧妙设置

Question

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

相同的代码在 localhost 上工作得很好，但是一旦我将它部署到 vercel，它就无法工作并抛出错误。

我正在使用以下代码发布来自 API 的消息。

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

Answer 1

我在部署过程中遇到了类似的问题。这里的要点是使用 ABLY REST API (https://www.ably.io/documentation/rest) 来 send/publish 消息和 ABLY 实时订阅事件。这样，你甚至不需要写一个API。您可以通过 Axios 或类似的 npm 包直接调用 Ably REST API。

调用以下方法send/publish将消息发送给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"' 定义了您将在其上发布消息的事件名称。现在您可以在要订阅事件“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”的频道，上面的代码就会被触发。

Vercel 巧妙设置

Vercel ably setup

javascript

deployment

vercel

ably-realtime