无头浏览器的另类用法

😁😁😁😁😁😁😁😁😁😁😁😁😁😁😁😁😁
更多可以看这里

起因

出于某些不可抗的因素，原本可以访问 chatGPT 的电脑访问十分缓慢，就算能访问也不能输入代码片段(会被内网的NetSkope拦截)。

不同的尝试

• 尝试安装 VPN。失败，因为电脑安装软件需要权限
• 通过 IP 访问 chatGPT 的网站。失败，IP 被内网加入黑名单了
• 尝试经过代理服务器访问。
  • 远程连接我的电脑，通过我的电脑访问。风险过大，本地电脑有定时截屏，不想暴露我的桌面
  • 博客接入 chatGPT 的 Open API。暂时失败，不清楚为啥 key 一直提示无效(是要钱)
  • 服务器启动一个 headless browser（无头浏览器），通过远程访问这个浏览器。

无头浏览器

简介

无头浏览器就是没有 UI 界面的浏览器。

无头浏览器常用在自动化测试(Automation)，页面爬虫等场景。主要可以模拟用户真实的点击。

谷歌无头浏览器(browserless/chrome)

简介

“browserless/chrome” 是无头的谷歌浏览器。

特点

• 首先具有无头浏览器的特点
• 支持容器化，可以部署在云平台
• 支持远程连接，集成 puppeteer, playwright, selenium’s webdriver

开始

1. 在 Docker 里拉取对应的镜像

   docker pull browserless/chrome
   

2. 启动容器

    docker run \
    -e "CONNECTION_TIMEOUT=-1" \
    -e "DISABLE_AUTO_SET_DOWNLOAD_BEHAVIOR=true" \
    -e "TOKEN=xxx" \
    -e "PORT=3000" \
    -e "MAX_CONCURRENT_SESSIONS=1" \
    -p 3000:3000 --restart always -d --name browserless browserless/chrome
   

   • CONNECTION_TIMEOUT - 表示不断开和服务器内无头浏览器的连接(默认30秒就断开了，很坑，我一开始以为我网络故障)
   • DISABLE_AUTO_SET_DOWNLOAD_BEHAVIOR - 关闭下载行为
   • Token - 这个很重要，可以防止服务器被人滥用。设置token=xxx之后下次访问就要在url里带着参数，比如部署在 www.abc:3000，就要变成www.abc:3000?token=xxx
   • PORT - 设置访问的端口
   • MAX_CONCURRENT_SESSIONS - 这个也比较重要，可以控制当前连接的session最多同时几个人在线
   • 剩下的参数都是docker内置的，具体参考官网

   这些常用参数外，剩下的全部参数在这

3. 效果

1. 基本原理
   客户端连接无头浏览器是通过长连接，当使用效果图中的连接方式，服务器会推送图片(无头浏览器当前应该显示的图片)，客户端通过canvas实时绘制UI展示。

2. 我的效果

   经过我的搭建，效果确实有，但是实时传输图片实在特别的卡，基本卡成PPT。

结论

使用无头浏览器打开一个可视化界面的方案似乎不太好用，如果采用REST API的方式或许会好些，但是似乎还不如直接接入chatGPT的API。如果有啥好的方法希望评论建议一下吧。🤞🙋🏻‍♂️

TODO

😁😁😁😁😁😁😁😁😁😁😁😁😁😁😁😁😁
更多可以看这里