我们已经确认了 JSXC 的 `dist/` 目录结构完整，现在我们将 **通过终端命令逐项测试关键服务是否正常**，确保
前端能成功连接。
---
## ✅ 目标：验证从浏览器到 XMPP 服务器的全链路连通性
我们将按以下顺序测试：
1
. ✅ 静态文件能否访问（
Nginx）
2
. ✅ WebSocket 路径是否可达
3. ✅ Prosody WebSocket 服务是否
运行
4
. ✅ DNS 和 SSL 是否正确
5
. ✅ 模拟登录流程（JID 格式 + 密码）
---
### 🔧 测试 1：检查
Nginx 是否正确提供 JSXC 静态资源
运行以下 `curl` 命令测试关键文件是否存在且可访问：
```bash
# 测试 index
.html
curl -I https://szrengjing
.com/jsxc/dist/index
.html
# 测试 JS bundle
curl -I https://szrengjing
.com/jsxc/dist/jsxc
.bundle
.min
.js
# 测试 CSS 文件
curl -I https://szrengjing
.com/jsxc/dist/styles/jsxc
.min
.css
```
✅ 正常响应应为：
```
HTTP/2 200
server:
nginx
content-type: text/html
```
❌ 如果返回 `404 Not Found` 或超时，请检查：
- `/www/wwwroot/szrengjing
.com/jsxc/dist/` 下的文件权限
-
Nginx 配置中 `root` 是否指向正确的路径
---
### 🔧 测试 2：检查 WebSocket 端点是否开放（
使用 `wscat`）
我们需要安装 `wscat` 来测试 WSS 连接。
#### 安装 wscat（Node
.js 工具）：
```bash
npm install -g wscat
```
#### 测试连接到 XMPP WebSocket：
```bash
wscat -c wss://szrengjing
.com/xmpp-websocket
```
👉 成功示例输出：
```
Connected (press CTRL+C to quit)
< <?xml version=&#
39;1
.0&#
39;?>
< <stream:stream xmlns:stream=&#
39;http://etherx
.jabber
.org/streams&#
39; xmlns=&#
39;jabber:client&#
39; id=&#
39;abcd12
34&#
39; from=&#
39;szrengjing
.com&#
39; version=&#
39;1
.0&#
39; xml:lang=&#
39;en&#
39;>
```
🎉 表示：**Prosody 接受连接，WebSocket 正常！**
❌ 失败可能原因：
- `net::ERR_CONNECTION_TIMED_OUT` →
Nginx 未代理 `/xmpp-websocket`
- `40
3 Forbidden` → `cross_domain_websocket` 限制
- `Upgrade required` →
Nginx 缺少 `upgrade` 头
---
### 🔧 测试
3：本地直接连接 Prosody 的 WebSocket 端口（绕过
Nginx）
有时
Nginx 会拦截问题。我们可以先测试本地是否通。
查看 Prosody 是否监听 `5280`：
```bash
sudo netstat -tuln | grep 5280
```
预期输出：
```
tcp6 0 0 :::5280 :::* LISTEN
```
然后用 `wscat` 连接本地端口（假设 Prosody 监听在 localhost:5280）：
```bash
wscat -c ws://localhost:5280/xmpp-websocket
```
如果这能连上，但外部 `wss://szrengjing
.com/xmpp-websocket` 不行 → 说明是 **
Nginx 配置问题**
---
### 🔧 测试 4：检查
Nginx 是否正确代理 WebSocket
请
运行以下命令查看你的
Nginx 配置中是否有如下内容：
```bash
grep -A 10 "location /xmpp-websocket" /www/server/panel/vhost/
nginx/szrengjing
.com
.conf
```
或通用路径：
```bash
grep -r "/xmpp-websocket" /etc/
nginx/ /www/server/panel/vhost/
nginx/
```
你应该看到类似：
```
nginx
location /xmpp-websocket {
proxy_pass http://127
.0
.0
.1:5280;
proxy_http_version 1
.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
```
⚠️ 必须包含：
- `Upgrade` 和 `Connection: upgrade`
- `proxy_http_version 1
.1`
否则 WebSocket 升级失败！
---
### 🔧 测试 5：DNS 与 SSL 是否生效
```bash
# 测试域名解析
dig szrengjing
.com +short
# 应返回你的服务器 IP
```
```bash
# 测试 HTTPS 是否可用
curl -vI https://szrengjing
.com --connect-timeout 10
```
✅ 应看到：
- `HTTP/2 200`
- `subject: CN=szrengjing
.com`
- TLS 握手成功
---
### 🔧 测试 6：确认用户账号存在（Prosody 内部验证）
进入 Prosody 容器或主机，检查用户是否存在：
```bash
sudo prosodyctl listusers szrengjing
.com
```
输出示例：
```
admin@szrengjing
.com
user1@szrengjing
.com
```
如果没有输出，说明你还没创建账号：
```bash
sudo prosodyctl register admin szrengjing
.com yourpassword
```
---
### 🔧 测试 7：强制刷新浏览器缓存并重新加载
页面
有时候浏览器缓存了旧的 JS 请求列表。
在终端模拟请求最新 HTML：
```bash
curl -s https://szrengjing
.com/jsxc/dist/index
.html | grep -i "jsxc
.bundle
.min
.js"
```
✅ 输出应只包含：
```html
<script src="jsxc
.bundle
.min
.js"></script>
```
❌ 不应出现：
```html
<script src="jquery
.min
.js">
<script src="strophe
.min
.js">
```
如果有，说明你没更新 `index
.html`！
---
## ✅ 最终修复总结
| 问题 | 解决方法 |
|------|----------|
| `ERR_CONNECTION_TIMED_OUT` on JS/CSS | 替换 `index
.html`，只保留 `jsxc
.bundle
.min
.js` 和 `styles/jsxc
.min
.css` |
| WebSocket 连接失败 |
使用 `wscat` 测试 `wss://szrengjing
.com/xmpp-websocket` |
|
Nginx 代理失败 | 添加 `Upgrade`, `Connection: upgrade` 头 |
| 用户无法登录 |
使用 `prosodyctl register` 创建账号 |
| 文件 404 | 检查
Nginx `root` 路径和文件权限 |
---
## ✅ 推荐最终操作流程
```bash
# 1
. 更新 index
.html
cat > /www/wwwroot/szrengjing
.com/jsxc/dist/index
.html << &#
39;EOF&#
39;
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>JSXC Chat</title>
<link rel="stylesheet" href="styles/jsxc
.min
.css" />
</head>
<body style="display:flex;justify-content:center;align-items:center;height:100vh;">
<div>
<input type="text" id="jid" placeholder="admin@szrengjing
.com" /><br>
<input type="password" id="password" placeholder="密码" /><br>
<button onclick="login()">登录</button>
</div>
<div id="app"></div>
<script src="jsxc
.bundle
.min
.js"></script>
<script>
function login() {
const jid = document
.getElementById(&#
39;jid&#
39;)
.value;
const password = document
.getElementById(&#
39;password&#
39;)
.value;
window.app = new JSXC({
xmpp: {
url: &#
39;/xmpp-websocket&#
39;,
domain: &#
39;szrengjing
.com&#
39;,
resource: &#
39;web&#
39;,
jid: jid,
password: password
},
root: &#
39;/jsxc/dist/&#
39;,
debug: true
});
window.app
.login(jid, password);
}
</script>
</body>
</html>
EOF
# 2
. 设置正确权限
chown -R www:www /www/wwwroot/szrengjing
.com/jsxc/dist/
#
3. 重启
Nginx
systemctl restart
nginx
# 4
. 测试 WebSocket
wscat -c wss://szrengjing
.com/xmpp-websocket
```
---
本文介绍了如何在Windows环境下下载、安装Nginx1.24版本，以及如何配置和使用它来运行前端项目，解决本地开发时的跨域问题，只需将HTML文件放在特定文件夹并启动Nginx服务。
扫一扫
2350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
