微信 H5 打开调试模式
http://debugxweb.qq.com/?inspector=true
你来到了艺术的荒原
http://debugxweb.qq.com/?inspector=true
仅在桌面端浏览器出现,点击这里去复现:https://wsd.pages.dev/preview/backdrop-filter
可以看到元素尺寸变化的时候,背景模糊并没有跟随变化
移动端反而没出现这个问题
在除了语言专用的插件 和 LanguageService 之外,还有很多非常方便的插件:
es6-string-* 在模版字符串中解析另一种语法,用于拼接一些其他语法的字符串,这是一类插件,包括这些:
主要重点在于单端口并且同一个路径提供不同服务,首先需要满足以下条件:
pm2 start ./server/main.js --node-args="-r esm" --name hackchat
启动服务。流程:
client/client.js
,在 320 行找到 var wsPath = ':6060';
改为 var wsPath = '/';
。修改 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
主要优化了以下几个方面
如果有看到好文章,欢迎使用网页打印功能记录为 PDF 或者纸质文稿。
ps: 如果看到页眉页脚,可能是浏览器默认设置的,可以在打印的更多设置
里面取消勾选