TownSquare：一行 script 标签，让你的网站活起来

原文来源：TownSquare 官方网站 — TownSquare 是一个极简的网站临场感工具，只需一行 script 标签，就能让访问者看到彼此，在页面上互动。

从孤独的网页到有人居住的角落

你有没有过这种感觉：打开一个博客文章，读完之后觉得它很好，但好像少了点什么——少了一种"这里有人"的感觉。

Web 站点的本质是信息的容器，但长期以来它们都是单向的。你可以阅读、评论（如果你的网站有评论系统），但你感受不到其他访问者的存在。

TownSquare 是一个微小的 JS 脚本，解决的就是这个问题。它给你的网站添加了一个 "临场感层"（presence layer）——访问者可以实时看到彼此，在小广场里走动、打招呼、坐下来聊天。

不需要注册账号，没有算法推荐，没有推送通知。正如它的标语所说：

"你的网站，但有人居住。"

"Web 上充满了内容，但空空荡荡没有人。TownSquare 把一点点临场感带回来。"

它到底做了什么？

安装：一行代码

在网站 </body> 之前插入一行 script 标签即可：

<link rel="stylesheet" href="https://your-host/widget.css" />
<div id="townsquare-root"></div>
<script type="module">
  import { mountTownSquare } from "https://your-host/townsquare.mjs";
  mountTownSquare(document.getElementById("townsquare-root"), {
    serverOrigin: "https://your-host",
    socketPath: "/live",
  });
</script>

就是这么简单。不需要构建工具、不需要注册账号、不需要依赖管理。 如果你不想自己托管，可以直接在他们的注册页面申请一个 hosted 实例，几分钟内上线。

用户体验：像素小人的社交

一旦集成，访问者会在页面底部看到一个小广场：

• 走动：按 ← → 键移动你的像素小人，或在触摸屏上滑动
• 打招呼：按 T 键或点击名字输入聊天消息
• 跳跃：按 J 键跳跃，按 H 键击掌——如果附近有人也在按 H，就会互相击掌
• 坐下：广场上有长椅和树，可以坐上去休息
• 彩蛋：在触摸设备上有跳跃和击掌按钮

所有的互动都是实时的、零摩擦的。不要求注册——你出现的那一刻，其他人就能看到你。

实际效果

我在 Hacker News 上看过大家玩 TownSquare 的截图。那种体验很奇妙——你知道你面前的不是机器人，而是另一个正在读同一篇文章的人。你们在同一个"空间"里。

一位体验过的网友说：

"我很久没有在网络上遇到过这么有趣和好玩的东西了。"

另一位说：

"不知道为什么，但看到人们这样聊天我总是会笑起来。"

技术架构

虽然用户看起来很简单，但 TownSquare 的技术选型相当精良：

后端：Node.js + WebSocket（单机，内存存储） 前端：原生 JavaScript ES Module（无框架依赖） 协议：自定义轻量 WebSocket 协议

项目结构

定制化

TownSquare 支持通过 CSS 变量自定义主题色，以适应不同网站的设计风格：

#townsquare-root {
  --scene: #your-color;
  --you: #your-accent;
  --tree-canopy: #green;
}

当前数据

截至 6 月 23 日，150+ 个注册站点、248,352 条消息交换、165 GitHub Stars。项目由 Cauê Napier 创建，代码几乎全部用 AI 工具（Claude + Cursor Agent）辅助编写。

不是又一个社交平台

TownSquare 最聪明的地方在于它的克制：

• 无持久化：用户进入空间，互动，离开——一切不复存在
• 无账号系统：不需要注册、登录、密码重置
• 无算法：不推荐内容、不推送通知、不追踪用户
• 轻量级：单文件 widget，不依赖任何框架

它刻意不做任何"社交平台"该做的事。它只是一个微小的窗口，让你感受到同一时刻还有别人在。

能用来做什么？

作为一个独立开发者，TownSquare 的想象空间很大：

1. 技术博客：读者可以在文章底部"偶遇"，交流阅读心得
2. SaaS 产品：让试用者看到彼此，产生"很多人都在用"的社会证明
3. 个人网站：给访客一个意外惊喜——"原来这里还有人！"
4. 文档站点：遇到问题时，旁边可能就有人在看同一页

当然，它也有一些明显的限制：没有持久化的聊天记录、大规模并发时性能会下降、需要你自己部署维护后端。但对于一个个人项目来说，这些限制恰好构成了它的特色——轻量、短暂、有趣。

开源与运营

TownSquare 的代码以 MIT 许可证开源在 GitHub 上，使用了 Node.js 18+ 和 npm 构建。如果你想自己部署，十分钟就能搞定：

git clone https://github.com/cauenapier/TownSquare.git
cd TownSquare
npm install
npm start

项目还附带了完整的自动化冒烟测试（WebSocket smoke test），方便 CI 集成。

写在最后

TownSquare 不是那种"改变世界"的产品。它不做任何大事——它只是让浏览网页这件事，多了一点温度。

在这个 AI Agent 正在批量生成内容、社会网络正在变得日益嘈杂的时代，TownSquare 提醒我们：Web 的本质是人与人之间的连接，而不是内容与内容之间的链接。

有时候，最好的体验就是和其他人一起坐在一张虚拟长椅上，什么都不说，只是知道他们也在。