如何在Svelte页面中引入KafkaJS？变量传递异常求助

第一步：正确配置hooks.server.js #

确保你在hooks.server.js里完成Kafka生产者的初始化，并挂载到请求上下文的event.locals中：

import { Kafka, logLevel } from 'kafkajs';

export const handle = async ({ event, resolve }) => {
  // 初始化Kafka客户端
  const kafka = new Kafka({
    clientId: 'your-app-client',
    brokers: ['your-broker-address:9092'],
    logLevel: logLevel.WARN
  });

  // 创建并连接生产者（可根据需求选择提前连接或使用时连接）
  const producer = kafka.producer();
  await producer.connect();

  // 将生产者挂载到请求上下文
  event.locals.producer = producer;

  // 继续处理请求
  const response = await resolve(event);

  // 请求结束后断开生产者连接（可选，根据业务场景调整）
  await producer.disconnect();

  return response;
};

第二步：通过server端load函数传递生产者 #

在页面同目录下创建+page.server.js文件，编写server端的load函数，从locals中取出生产者并返回给页面：

export const load = async ({ locals }) => {
  return {
    producer: locals.producer
  };
};

第三步：在page.svelte中接收并使用生产者 #

现在回到page.svelte，导出producer即可获取到server端传递过来的实例：

<script>
  import Table from "$lib/Table.svelte";
  export let producer;

  // 示例：发送Kafka消息的函数
  const sendMessage = async () => {
    await producer.send({
      topic: 'your-target-topic',
      messages: [{ value: 'Message from Svelte page' }]
    });
  };
</script>

<button on:click={sendMessage}>发送Kafka消息</button>

关键注意点 #

• Kafkajs是Node.js端库，无法在浏览器环境运行，所以必须放在server侧初始化和处理。
• event.locals是请求级别的上下文变量，只有通过server端的+page.server.js导出的load函数，才能将上下文数据传递给页面组件。

内容的提问来源于stack exchange，提问作者codeX