跨空间绘图方案:使用 cpolar 内网穿透服务访问 Tldraw

前言

在当今远程协作日益普遍的背景下,创意工具的跨空间访问能力成为提升团队效率的关键。许多设计团队和教育机构仍然依赖传统的绘图软件,这些工具要么需要复杂的网络配置,要么缺乏实时协作功能,导致团队成员之间的沟通成本高昂,创意传递不畅。如何在保证数据安全的前提下,实现绘图工具的无缝远程访问,成为创意工作者面临的重要挑战。

Tldraw作为一款开源的在线绘图工具,以其轻量级设计和强大的协作功能脱颖而出。它支持多人实时编辑、无限画布扩展和多种图形工具,为用户提供了灵活的创意表达平台。然而,本地部署的 Tldraw 服务无法被外部网络访问,限制了其在远程协作中的应用。cpolar 内网穿透服务的引入,为 Tldraw 赋予了远程访问能力。通过在本地网络和公网之间建立加密隧道,cpolar 可以将 Tldraw 服务安全地暴露至互联网,使用户能够在任何设备上访问和编辑绘图文件,实现真正的跨空间协作。

本方案的技术亮点在于实时协作安全穿透的创新结合。Tldraw 的 WebSocket 技术确保多人编辑时的低延迟同步;cpolar 则通过动态端口映射和端到端加密,保障了远程访问的稳定性和数据安全性。这种设计不仅简化了用户操作,还大大提升了协作效率,适合远程团队、在线教育和创意工作室等多种场景。

从用户体验角度来看,Tldraw 与 cpolar 的组合带来了显著提升。例如,远程团队可以在不同地点同时编辑项目流程图,实时讨论并修改设计方案;教师可以创建在线白板,让学生远程参与课堂互动;设计师则可以与客户共享绘图链接,实时获取反馈并进行修改。此外,Tldraw 支持离线工作模式,用户可以在没有网络连接的情况下继续编辑,待网络恢复后自动同步更改,进一步增强了工具的实用性。

接下来,我们将从 Docker 部署 Tldraw 开始,详细介绍如何配置 cpolar 实现远程访问,帮助你构建一个高效、安全、灵活的跨空间绘图环境,释放团队的创造力和协作潜能。

1.docker安装tldraw

在开始操作之前,请先确认你的系统中是否已经安装了 Docker。你可以通过以下命令来检查:

 docker --version

如果未安装过,可以参考这个教程https://www.cpolar.com/blog/docker-installation-linux-windows-macos

如果输出类似如下内容,表示 Docker 已安装:

检查docker是否启动:

 Get-Service com.docker.service

40aeaa7c9c039d5305f96f11a8cc3917

若未启动,则输入命令启动:

Start-Service com.docker.service

0b96b268e0843fd9389be3fb6220f7d0

在任务管理器,查看是否启动成功:

0fba528be7fa865e5c22bcd272f9208e

接下来我们来安装tldraw:

docker run -d --name tldraw -p 7900:3000 wbsu2003/tldraw

2340665931a4a13816a2f49cdd14291f

端口号为7900,输入localhost:7900,查看是否启动成功:

52cc9cd58dfb7ab91e496b479e0cce5b

这样就是安装成功啦,接下来我们可以玩转tldraw:

3b68fae760d954da28f3e9c2ad6e1458

2.安装cpolar实现随时随地开发

cpolar 可以将你本地电脑中的服务(如 SSH、Web、数据库)映射到公网。即使你在家里或外出时,也可以通过公网地址连接回本地运行的开发环境。配合 VSCode 的 Remote - SSH 插件,你可以从任何设备访问自己的完整开发环境。

❤️以下是安装cpolar步骤:

官网在此:https://www.cpolar.com

点击免费注册注册一个账号,并下载最新版本的Cpolar:

image-20250718141226264

登录成功后,点击下载Cpolar到本地并安装(一路默认安装即可)本教程选择下载Windows版本。

image-20250718141319628

Cpolar安装成功后,在浏览器上访问http://localhost:9200,使用cpolar账号登录,登录后即可看到Cpolar web 配置界面,结下来在web 管理界面配置即可。

image-20250718141359139

3.配置公网地址

通过配置,你可以在本地 WSL 或 Linux 系统上运行 SSH 服务,并通过 Cpolar 将其映射到公网,从而实现从任意设备远程连接开发环境的目的。

  • 隧道名称:可自定义,本例使用了:tldraw,注意不要与已有的隧道名称重复

  • 协议:http

  • 本地地址:7900

  • 域名类型:随机域名

  • 地区:China Top

    image-20250718143111980

创建成功后,打开左侧在线隧道列表,可以看到刚刚通过创建隧道生成了公网地址,接下来就可以在其他电脑或者移动端设备(异地)上,使用任意一个地址在终端中访问即可。

  • http表示使用的协议类型
  • 713e0973.r2.cpolar.top是 Cpolar 提供的域名

image-20250718143539479

通过 Cpolar 提供的公网地址,就可以随时随地进入本网站啦!

http://713e0973.r2.cpolar.top/

image-20250718143619707

4.保留固定二级子域名公网地址

使用cpolar为其配置固定二级子域名地址,该地址为固定地址,不会随机变化。

image-20250718144544663选择区域和描述:有一个下拉菜单,当前选择的是“China Top”。
右侧输入框,用于填写描述信息。
保留按钮:在右侧有一个橙色的“保留”按钮,点击该按钮可以保留所选的二级子域名。
列表中显示了一条已保留的子域名记录。

  • 地区:显示为“China Top”。
  • 二级子域名:显示为“tldraw”。

image-20250718145636523

登录cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到所要配置的隧道tldraw,点击右侧的编辑

image-20250718145915322

修改隧道信息,将保留成功的二级域名配置到隧道中。

  • 域名类型:选择二级子域名
  • Sub Domain:tldraw

点击更新

image-20250718152127607

创建完成后,打开在线隧道列表,此时可以看到随机的公网地址已经发生变化,地址名称也变成了保留和固定的二级子域名。

image-20250718152428787

最后测试一下固定的地址是否好用:

image-20250718152715708

这样,就可以随时随地完成你的画图任务啦。

总结

tldraw 是一款开源免费的在线白板工具,它以其简洁易用的界面、强大的实时协作功能和无限扩展的画布空间,支持用户轻松进行图表绘制、头脑风暴及创意分享。无论是在跨平台兼容性、数据持久性和可导出性方面,还是在提供高性能表现上,tldraw 都表现出色,适用于个人创作到团队合作等多种场景,是一个灵活而强大的视觉沟通解决方案。

通过 Tldraw 和 cpolar 的协同应用,我们成功构建了一个突破空间限制的创意协作解决方案。这一方案不仅提供了流畅的绘图体验,还实现了安全便捷的远程访问,为团队协作带来了革命性的变化。无论是设计团队、教育机构还是企业组织,都可以根据自身需求应用这一技术组合,提升协作效率和创新能力。随着远程工作的普及,这种本地化部署与远程访问相结合的方案将成为创意工具的重要发展方向,推动协作技术的不断创新和优化。

感谢您对本篇文章的喜爱,有任何问题欢迎留言交流。cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

锡兰_CC

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值