ð½½为实时应用程序增加存在或意识

我们继续查看Svelte实时多人游戏，这次是在的存在中，也称为意识。。

In an earlier SvelteKit Ably post，我们首先要使用出色的无服务器Websocket创建实时的，多人游戏在线游戏。游戏是基本的；两名玩家轮流试图在网格上索取最多的正方形。他们通过用颜色标记其四个侧面的每一个。尽管游戏很简单，但它使用功能强大的实时功能用于聊天和更复杂的多用户应用程序。

在这篇文章中，我们通过添加大厅来改善用户体验。玩家准备比赛时进入大厅，从那里可以邀请其他人加入游戏，并接受玩家的挑战。

什么是存在和意识？

在本质上，存在和意识是同一件事，并且允许用户或玩家在频道上做广告。这正是我们游戏所需的。当玩家进入大厅时，他们希望其他等待的玩家知道他们可以玩。同样，进入的玩家想知道谁在线，并有可能邀请他们玩。存在或意识使这可能。

有一些Websocket服务的著名提供商用于实时交互。当 partykit 使用意识时，请使用“存在”一词。另外两个提供商： PubNub 和推动器也使用术语。

现在我们知道了什么存在和意识，让我们看看它们是如何在Sqvuable游戏中使用的。

ð§±我们正在构建的

与Sqvuable Game上的上一篇文章类似，我们不会从头到尾建立存在。取而代之的是，这里的焦点是在代码片段上演示了主要功能以及如何在Svelte中使用的存在。游戏的完整代码是在Git reto中（下面链接），您可以克隆以获取更多详细信息。

主要的新功能是大厅，它使用存在。在大厅中，您可以邀请其他用户加入游戏，并接受其他玩家的邀请。玩家在开始新游戏时会自动离开大厅。

ð游说客户代码

正如您可能期望的那样，没有额外的服务器端设置来实现。在较早的用户流中，我们为用户分配了令牌服务器端。我们使用该令牌来初始化前端的websocket并加入频道。现在，一旦建立了频道，我们就需要设置用户以供在场。

<script lang="ts">
    import app from '$lib/configuration';
    import type { Types } from 'ably';
    import { Realtime } from 'ably';
    import { onMount } from 'svelte';
    import type { PageData } from './$types';

    export let data: PageData;

    const { ablyChannelName } = app;

    let { myClientId, name, token } = data ?? {};

    let channel: Types.RealtimeChannelPromise | null = null;

    onMount(async () => {
        const ably = new Realtime.Promise({
            ...token,
            authCallback: () => {   }
        });

        await ably.connection.once('connected');

        channel = ably.channels.get(ablyChannelName);

        await channel?.attach();

        await channel?.presence.enter({ name });

        await channel.presence.subscribe(async (presenceUpdate) => {
            const { action, data } = presenceUpdate;

            const updatedPresentMembers = (await channel?.presence.get()) ?? [];
            if (updatedPresentMembers) {
                /* logic to update UI with new presence data */
            }
        });
    });

</script>

到Line 28，代码与早期版本没有太大差异。我们首次在28中看到存在。您可以通过频道对象访问presence方法，用户必须积极加入频道的存在（加入不是自动的）：

await channel?.presence.enter(data);

data这里可以是字符串，也可以像我们上面的对象一样。如果选择一个对象，请确保它是可序列化的。这些数据将（以客户端代码）提供给所有其他用户订阅的频道。实际上，要接收到存在数据，我们需要订阅Channel -Channel Hocement Feed（如Line 30中）。提供的回调函数是针对我们每次客户端接收到存在频道的数据时要运行的逻辑的。

对于此游戏，我们只需要更新新玩家进入用户界面中的可用玩家列表。

可以提供其他presence方法；除了presence.enter外，还有一种presence.leave方法，再次方便地更新界面，删除了不再可用的玩家，也许是因为他们已经开始玩游戏。我们还可以使用presence.update方法进行自定义更新。

示例存在消息

除了我们上面看到的数据字符串或对象之外，存在更新包括action和其他一些元标记，例如时间戳。 action将是enter，leave或update，有助于在回调中过滤传入的存在数据。

这是一个示例更新：

{
  "id": "frkjZFEfH-:0:0",
  "clientId": "4a4f8b8a-0207-43d8-b027-ad9adf44dd82",
  "connectionId": "frkjZFEfH-",
  "timestamp": 1684862512507,
  "encoding": null,
  "data": {
    "name": "Micki"
  },
  "action": "enter"
}

注意，当我们创建用户令牌时，分配了clientId。客户端可以多次连接，并且每个连接中的每一个共享相同的clientId，但具有唯一的connectionId。

•存在更新

就像presence.enter，presence.leave和presence.update一样，可以包括数据有效载荷。我们可以使用presence.update使用该有效载荷来处理游戏邀请物流。例如，当用户单击邀请micki 按钮时，我们可以发送到存在更新：

await channel?.presence.update({
    type: 'invite',
    sender: myClientId,
    target: player2,
    gameId,
    name
});

这是游戏的自定义数据有效负载。频道上的所有玩家都将收到此信息，这就是为什么我们包括目标播放器ID的原因。可以用来过滤presence.subscribe回调中的存在更新。除了让某人知道他们已被邀请加入游戏之外，这些更新可用于更新每个人的用户界面。让他们知道Micki有开放邀请。

游戏包括接受和取消邀请的类似频道更新。最后，当玩家同意玩游戏时，他们的客户都会发送channel.leave在场消息。

和以前一样，您可以提起此代码以供聊天或其他实时应用中使用。例如，在聊天应用程序中，您可以让用户在离开计算机几分钟时留下自定义的信息。有关API的更多详细信息，请参见Ably presence tutorial。

ðäSvelte实时多人游戏：接下来是什么？

游戏绝不是抛光的，我正在考虑进一步的功能和服务来改进它。就实时和Websocket方面而言，它可能只需要一些小调整即可。该游戏目前由Netlify在无服务器环境中托管。使用无服务器Redis来跟踪最高得分甚至顶尖球员可能很不错。让我知道你的想法！

ðð½Svelte实时多人游戏：总结

在这篇文章中，我们看了对Svelte实时多人游戏的存在和意识。尽管我们专注于游戏，但我们更普遍地看到了：

• 什么存在和意识是;
• 您如何使用存在更新对表面状态的变化；和
• 如何使用明显存在。

请see the full repo code on the Rodney Lab GitHub repo。我希望您发现这篇文章有用，并且可以在您自己的Svelte实时多人游戏或应用程序中使用代码。让我知道您是否有任何改进该职位的建议。还要了解有关新功能的想法，以添加到游戏中。在下面放置评论或reach out on other channels。

ðð½Svelte实时多人游戏：反馈

如果您发现此帖子有用，请参见下面的链接以获取本网站上的更多相关内容。我希望您从视频中学到了一件新事物。让我知道是否有任何方法可以改进它。我希望您能在自己的项目中使用代码或入门器。请务必在Twitter上分享您的作品，给我提及，以便我可以看到您的工作。最后，请务必让我知道您想看的其他简短视频的想法。请继续阅读以找到与之联系的方法，以下更远。如果您发现此帖子很有用，即使您只能负担得起，请consider supporting me through Buy me a Coffee。

最后，请随时在社交媒体帐户上分享所有发现有用的关注者的帖子。除了在下面发表评论外，您还可以通过Twitter和askRodney on Telegram通过@askRodney与您取得联系。另外，请参见further ways to get in touch with Rodney Lab。我定期在SvelteKit以及Search Engine Optimization上发布，以及其他主题。另外，subscribe to the newsletter to keep up-to-date通过我们的最新项目。