分类 琐碎 下的文章

VSCode 插件记录

在除了语言专用的插件 和 LanguageService 之外,还有很多非常方便的插件:

  1. file-size 在状态栏看到文件大小
  2. indent-rainbow 用不同的彩虹颜色来标记缩进
  3. TODO-Highlight 高亮指定的关键字 “ TODO / Console ”等,方便快速在源码中定位 TODO
  4. es6-string-* 在模版字符串中解析另一种语法,用于拼接一些其他语法的字符串,这是一类插件,包括这些:

    • es6-string-css
    • es6-string-html
    • es6-string-javascript
    • inline-sql
  5. Gitless 是 Gitlens 的 Fork 品,不含付费项目
  6. CodeGeeX 类似于 Github Copilot 的代码辅助工具,不聪明也不太蠢,至少免费

部署 hackChat 并在 Nginx 同时提供 http 和 websocket 服务

主要重点在于单端口并且同一个路径提供不同服务,首先需要满足以下条件:

  1. 首先根据官方教程完成部署,并使用pm2 start ./server/main.js --node-args="-r esm" --name hackchat启动服务。
  2. 假设在创建配置时,默认选择的是 6060 端口作为 websocket 端口。
  3. 假设需要使用 once.chat 这个域名,但是只想使用 443 端口,不希望 websocket 走 6060。

流程:

  1. 修改 client/client.js,在 320 行找到 var wsPath = ':6060';改为 var wsPath = '/';
  2. 根据普通的 Nginx 配置流程,完成端口监听,SSL 等配置,我这边用的 BT面板,就不再详细说了。
  3. 修改 Nginx 配置,对于 localtion / 进行如下配置

    location / {
         root  /www/wwwroot/hackchat/client;
         if ( $http_upgrade = "websocket" ) {
           proxy_pass http://127.0.0.1:6060;
             }
           proxy_set_header Host $host:$server_port;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header REMOTE-HOST $remote_addr;
           add_header X-Cache $upstream_cache_status;
           proxy_set_header X-Host $host:$server_port;
           proxy_set_header X-Scheme $scheme;
           proxy_connect_timeout 30s;
           proxy_read_timeout 86400s;
           proxy_send_timeout 30s;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection "upgrade";
     }

此时打开网页,即可正常加载静态资源的同时,也能用根路径连接到 websocket 服务。

如果嫌麻烦的话呢,也可以修改 wsPath ,带上 /chat-ws 这样的 path (官方的实现方式),在 Nginx 中就可以直接通过 location 进行区分了,配置起来更简单一点。

欢迎体验: once.chat

博客对网页打印进行了优化

主要优化了以下几个方面

  1. 对于折叠和滚动的代码区域进行了修改,让代码能够换行并且完全展示
  2. 对于页面元素进行了精简
  3. 调整了布局和颜色

如果有看到好文章,欢迎使用网页打印功能记录为 PDF 或者纸质文稿。

ps: 如果看到页眉页脚,可能是浏览器默认设置的,可以在打印的更多设置里面取消勾选