3.9 KiB

Raw Permalink Blame History Unescape Escape

Web客户端配置说明

服务器地址配置

Web客户端会自动检测服务器地址，无需用户手动输入。

配置文件位置

web/app.js 第5-16行

当前配置

const SERVER_CONFIG = {
    // 云服务器公网IP
    publicIP: '120.46.87.202',
    port: '8080',
    
    // 获取WebSocket地址
    getWebSocketUrl: function() {
        // 如果通过浏览器访问，使用当前host
        // 否则使用配置的公网IP
        const host = window.location.host || `${this.publicIP}:${this.port}`;
        return `ws://${host}`;
    }
};

工作原理

1. 通过浏览器直接访问

当用户通过浏览器访问时（例如 http://120.46.87.202:8080），系统会自动使用当前的host地址：

访问地址: http://120.46.87.202:8080
WebSocket: ws://120.46.87.202:8080

2. 本地文件打开

如果用户直接打开HTML文件（file:///...），系统会使用配置的公网IP：

WebSocket: ws://120.46.87.202:8080

修改服务器地址

如果需要修改服务器地址，编辑 web/app.js：

const SERVER_CONFIG = {
    publicIP: '你的服务器IP',  // 修改这里
    port: '8080',              // 修改端口（如果需要）
    // ...
};

访问方式

方式1：通过服务器访问（推荐）

http://120.46.87.202:8080

优点：

自动使用正确的服务器地址
支持相对路径加载资源
完整的Web体验

方式2：本地文件访问

直接打开 web/index.html 文件

优点：

无需启动HTTP服务器
可以离线编辑

缺点：

需要正确配置服务器地址
某些浏览器可能有安全限制

防火墙配置

确保云服务器开放8080端口：

# openEuler/CentOS
sudo firewall-cmd --zone=public --add-port=8080/tcp --permanent
sudo firewall-cmd --reload

# 查看开放的端口
sudo firewall-cmd --list-ports

测试连接

1. 测试HTTP访问

curl http://120.46.87.202:8080

应该返回HTML内容。

2. 测试WebSocket连接

在浏览器Console中：

ws = new WebSocket('ws://120.46.87.202:8080');
ws.onopen = () => console.log('连接成功');
ws.onerror = (e) => console.error('连接失败', e);

安全建议

生产环境

使用HTTPS/WSS

const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const wsUrl = `${protocol}//${host}`;

配置SSL证书
- 使用Let's Encrypt免费证书
- 配置Nginx反向代理
添加身份验证
- 实现用户注册/登录
- 使用Token验证

开发环境

当前配置适用于开发和测试环境。

多环境配置

如果需要支持多个环境：

const SERVER_CONFIG = {
    // 根据环境选择配置
    getConfig: function() {
        const hostname = window.location.hostname;
        
        if (hostname === 'localhost' || hostname === '127.0.0.1') {
            // 本地开发环境
            return { host: 'localhost', port: '8080' };
        } else if (hostname === '120.46.87.202') {
            // 生产环境
            return { host: '120.46.87.202', port: '8080' };
        } else {
            // 默认配置
            return { host: '120.46.87.202', port: '8080' };
        }
    },
    
    getWebSocketUrl: function() {
        const config = this.getConfig();
        const host = window.location.host || `${config.host}:${config.port}`;
        return `ws://${host}`;
    }
};

故障排除

连接失败

检查服务器是否运行
检查防火墙设置
检查浏览器Console错误信息
使用开发者工具查看Network标签

跨域问题

WebSocket不受同源策略限制，但如果使用AJAX请求，需要配置CORS。

浏览器兼容性

所有现代浏览器都支持WebSocket：

Chrome 16+
Firefox 11+
Safari 7+
Edge (所有版本)
Opera 12.1+

3.9 KiB Raw Permalink Blame History Unescape Escape