<think>我们正在讨论如何
使用JavaScript通过
wss协议
连接WebSocket。
wss协议是
WebSocket的安全版本，类似于https，它在
WebSocket基础上添加了
SSL/TLS加密层，默认
使用443端口。
使用wss协议可以确保数据传输的安全性，避免中间人攻击。
根据引用内容，我们可以总结以下几点关键信息：
1.
使用wss协议时，URL以`
wss://`开头（引用[1]）。
2. 服务器必须
配置有效的
SSL证书，且证书的域名必须与前端请求的域名一致（引用[2]和[4]）。自签名证书在iOS设备上可能不被信任，需要手动添加到设备的信任列表中（引用[2]）。
3. 前端代码中，创建
WebSocket实例时直接
使用wss协议的URL（引用[1]）。
4. 需要确保防火墙开放了相应的端口（通常是443端口）（引用[4]）。
下面我们将详细说明JavaScript
使用wss连接WebSocket的步骤和注意事项。
### 步骤 1: 创建
WebSocket连接
在JavaScript中，创建
WebSocket连接非常简单，只需要实例化`
WebSocket`对象，并传入
wss协议的URL。
```javascript
//
使用wss协议，注意端口号（默认443）和正确的域名
const socket = new
WebSocket('
wss://your-domain.com:port/path');
```
注意：
- 将`your-domain.com`替换为你的域名，该域名必须与
SSL证书上的域名一致（引用[4]）。
- `port`是服务器监听的端口（通常为443，如果是默认端口，可以省略不写）。
- `path`是
WebSocket服务器的路径，根据服务器
配置填写。
### 步骤 2: 处理事件
与普通ws
连接一样，我们需要处理
WebSocket的几个事件：`onopen`, `onmessage`, `onclose`, `onerror`。
```javascript
socket.onopen = function(event) {
console.log('
WebSocket连接已建立');
//
连接建立后可以发送消息
socket.send('Hello Server!');
};
socket.onmessage = function(event) {
console.log('收到消息: ' + event.data);
};
socket.onclose = function(event) {
console.log('
连接关闭', event.code, event.reason);
};
socket.onerror = function(error) {
console.error('发生错误:', error);
};
```
### 步骤 3: 发送消息
使用`send()`方法发送消息，注意在
连接建立后才能发送（即`onopen`事件触发后）。
```javascript
// 示例：点击按钮发送消息
document.getElementById('sendBtn').addEventListener('click', function() {
const message = document.getElementById('messageInput').value;
if (socket.readyState ===
WebSocket.OPEN) {
socket.send(message);
} else {
console.error('
连接未打开');
}
});
```
### 完整示例代码
以下是一个
使用wss连接的完整HTML示例：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>
WSS WebSocket示例</title>
</head>
<body>
<h1>
WebSocket测试 (
WSS)</h1>
<input type="text" id="messageInput" placeholder="输入消息">
<button id="sendBtn">发送</button>
<div id="output"></div>
<script>
// 创建
WebSocket连接（
使用wss协议）
const socket = new
WebSocket('
wss://your-domain.com:443/ws');
// 事件处理
socket.onopen = function() {
document.getElementById('output').innerHTML += '<p>
连接已建立</p>';
};
socket.onmessage = function(event) {
document.getElementById('output').innerHTML += `<p>收到消息: ${event.data}</p>`;
};
socket.onclose = function() {
document.getElementById('output').innerHTML += '<p>
连接已关闭</p>';
};
socket.onerror = function(error) {
document.getElementById('output').innerHTML += `<p>错误: ${error.message}</p>`;
};
// 发送消息
document.getElementById('sendBtn').addEventListener('click', function() {
const message = document.getElementById('messageInput').value;
if (socket.readyState ===
WebSocket.OPEN) {
socket.send(message);
document.getElementById('output').innerHTML += `<p>已发送: ${message}</p>`;
} else {
alert('
连接未打开，请稍后再试');
}
});
</script>
</body>
</html>
```
### 注意事项
1. **
SSL证书**：服务器必须
配置有效的
SSL证书，且证书的域名必须与前端请求的域名完全一致（引用[2][4]）。如果
使用自签名证书，iOS设备可能无法
连接（引用[2]），需要用户手动信任证书。生产环境建议
使用受信任的证书颁发机构（如Let's Encrypt）签发的证书。
2. **端口开放**：确保服务器防火墙开放了
wss使用的端口（如443），并且服务器程序（如Nginx、
Swoole等）正确
配置了
SSL和
WebSocket代理（引用[4]）。
3. **跨域问题**：如果前端页面与
WebSocket服务器不在同一个域名下，可能会遇到跨域问题。需要在服务器端设置CORS头部，或者
使用反向代理（如Nginx）将
WebSocket请求代理到后端服务器。
4. **Android和iOS的差异**：引用[2]和[5]指出，在Android上可以正常
连接，而iOS上可能因证书问题失败。因此，务必确保
SSL证书有效且受信任。
5. **代理问题**：在移动端（如Android）
使用代理时，可能会影响
wss连接（引用[5]）。确保代理设置正确，或者尝试在无代理环境下测试。
### 常见问题解决
- **
连接失败**：检查浏览器控制台（F12）的错误信息。常见错误包括证书域名不匹配、证书无效、端口未开放等。
- **iOS设备无法
连接**：如果
使用自签名证书，需要在iOS设备的“设置”->“通用”->“关于”->“证书信任设置”中信任该证书（引用[2]）。
通过以上步骤，您可以在JavaScript中
使用wss协议安全地
连接WebSocket服务器。如果遇到问题，请根据错误信息逐一排查证书、端口和域名
配置。
§§相关问题§§
1. 如何在Nginx中
配置WebSocket代理和
SSL证书？
2. 如何生成免费的
SSL证书（如Let's Encrypt）？
3.
WebSocket连接在移动端（特别是iOS）的兼容性问题有哪些？
[^1]: 引用[1]
[^2]: 引用[2]
[^3]: 引用[3]
[^4]: 引用[4]
[^5]: 引用[5]</think>## JavaScript
使用 wss 协议
连接 WebSocket 的完整指南
wss 协议是
WebSocket 的安全版本（
WebSocket +
SSL），用于加密通信，防止数据被窃听。以下是 JavaScript
使用 wss 连接的详细方法和注意事项：
### 基础
连接方法
```javascript
// 创建
wss 连接 (
使用 SSL 加密)
const socket = new
WebSocket('
wss://your-domain.com:443/ws-endpoint');
// 事件处理
socket.onopen = (event) => {
console.log('安全
连接已建立');
socket.send('Hello
wss!'); // 发送加密消息
};
socket.onmessage = (event) => {
console.log('收到加密消息:', event.data);
};
socket.onerror = (error) => {
console.error('
wss 错误:', error);
};
socket.onclose = (event) => {
console.log('安全
连接关闭', event.code, event.reason);
};
```
### 关键注意事项
1. **
SSL 证书要求**：
- 必须
使用有效的
SSL 证书（非自签名）
- 证书域名必须与请求域名完全一致
- iOS 设备对证书要求更严格，自签名证书需手动添加到设备信任列表[^2]
2. **端口
配置**：
```javascript
// 标准端口 (可省略)
new
WebSocket('
wss://example.com') // 默认 443
// 自定义端口
new
WebSocket('
wss://example.com:8443/ws')
```
-
wss 默认
使用 443 端口（类似 HTTPS）
- 确保防火墙开放指定端口[^4]
3. **域名验证**：
- 前端请求域名必须与证书域名匹配
- 避免
使用 IP 地址，否则会触发证书错误[^4]
```javascript
// 正确 (域名匹配证书)
new
WebSocket('
wss://api.yourdomain.com/ws')
// 错误 (IP地址导致证书不匹配)
new
WebSocket('
wss://192.1
68.1.100:443/ws')
```
### 完整示例 (含 UI)
```html
<!DOCTYPE html>
<html>
<head>
<title>
wss 连接示例</title>
</head>
<body>
<input type="text" id="messageInput" placeholder="输入消息">
<button onclick="sendMessage()">发送加密消息</button>
<div id="messageArea" style="margin-top:20px"></div>
<script>
const socket = new
WebSocket('
wss://your-secure-domain.com/ws');
const messageArea = document.getElementById('messageArea');
socket.onopen = () => {
showMessage('安全
连接已建立');
};
socket.onmessage = (event) => {
showMessage(`服务器: ${event.data}`);
};
socket.onerror = (error) => {
showMessage(`错误: ${error.message || '未知错误'}`);
};
function sendMessage() {
const input = document.getElementById('messageInput');
if (socket.readyState ===
WebSocket.OPEN) {
socket.send(input.value);
showMessage(`我: ${input.value}`);
input.value = '';
}
}
function showMessage(msg) {
messageArea.innerHTML += `<p>${msg}</p>`;
}
</script>
</body>
</html>
```
### 常见问题解决
1. **iOS
连接失败**：
-
使用权威 CA 颁发的证书（如 Let's Encrypt）
- 确保证书链完整（包含中间证书）
- 检查 TLS 版本（推荐 TLS 1.2+）
2. **
连接错误排查**：
```javascript
// 添加详细错误处理
socket.onerror = (error) => {
console.error('
wss 错误详情:');
console.log('错误类型:', error.type);
console.log('错误码:', error.code);
console.log('原因:', error.reason || '未知');
};
```
3. **代理问题处理**：
- Android 代理环境下需确保代理
支持 wss
- 避免在 URL 中包含敏感参数（如 token）[^5]
```javascript
// 推荐方式 (通过 header 传递认证)
const socket = new
WebSocket('
wss://api.example.com/ws');
socket.onopen = () => {
socket.send(JSON.stringify({
action: 'AUTH',
token: 'your-token-here'
}));
};
```
### 服务器
配置要点
1. Nginx 反向代理
配置示例：
```nginx
server {
listen 443
ssl;
server_name your-domain.com;
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/privkey.pem;
location /ws {
proxy_pass http://backend:9501;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
```
2. 证书检测工具：
-
使用 [
SSL Labs](https://www.
ssllabs.com/) 测试证书
配置
- 确保证书包含 SAN（Subject Alternative Name）
> **重要提示**：生产环境必须
使用有效的 CA 签名证书，自签名证书仅适用于测试环境[^2][^4]。
本文介绍了如何在Swoole WebSocket服务器上开启SSL支持，以实现wss安全连接。首先，你需要获取pem格式的SSL证书。接着，确保Linux系统安装了openssl，并在Swoole编译时添加openssl支持。然后，在WebSocket服务器配置文件中设置SSL证书路径。最后，客户端通过js使用wss连接，服务器和浏览器需通过https访问。成功配置后，可以看到服务器和客户端的连接状态。
订阅专栏 解锁全文
扫一扫
4553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
