## 前言

在实时通信场景（聊天、协同编辑、行情数据）里，我们经常会看到 `ws://` 与 `wss://` 两种协议前缀。很多同学知道它们和 WebSocket 有关，却不一定清楚到底差别在哪、与 HTTP/HTTPS 有什么关系。本篇文章将延续通过“原理 + 步骤 + 示例”的讲解方式，带你彻底搞懂 **ws 与 wss**。

## 一、WebSocket 协议回顾

### 1.1 解决了什么问题？

- HTTP 天生是 **请求-响应** 模式，客户端必须主动拉取。
- 某些业务需要 **服务器主动推送** 数据，例如消息提醒、看板更新。
- WebSocket 通过一次握手升级，将 HTTP 连接变成 **全双工** 通道，允许双方随时发送数据。

### 1.2 握手关键点

1. 浏览器发起 HTTP 请求，并在 Header 中附带：
   - `Upgrade: websocket`
   - `Connection: Upgrade`
   - `Sec-WebSocket-Key`
2. 服务器验证并返回 `Sec-WebSocket-Accept`。
3. 双方切换到 WebSocket 帧格式持续通信。

这个握手阶段决定了我们使用 `ws://` 还是 `wss://`。

## 二、ws 与 wss 的区别

| 协议 | 传输层 | 默认端口 | 对应关系 |
| ---- | ------ | -------- | -------- |
| `ws://`  | TCP（明文） | 80  | 类似 HTTP |
| `wss://` | TLS over TCP（加密） | 443 | 类似 HTTPS |

- **ws**：未加密，适用于内网或对安全要求不高的场景。
- **wss**：在 ws 之上加入 TLS（SSL），所有帧都被加密，浏览器也会执行证书验证，适合公开站点或涉及敏感数据的业务。

> 注意：现代浏览器在 HTTPS 页面中 **禁止** 创建 `ws://` 连接，必须使用 `wss://`，否则会报 Mixed Content。

## 三、URL 结构与示例

```
ws://example.com:8080/path?token=abc
wss://realtime.webfem.com/quote
```

- **协议前缀**：ws / wss
- **主机**：域名或 IP
- **端口**：默认 80 / 443，可自定义
- **路径与查询参数**：用于区分业务、传递凭证

## 四、Node.js 服务端实战

使用 `ws` 库快速启动一个既支持 ws 又支持 wss 的服务：

```js
import http from 'node:http';
import https from 'node:https';
import fs from 'node:fs';
import { WebSocketServer } from 'ws';

const server = http.createServer();
const secureServer = https.createServer({
  cert: fs.readFileSync('./ssl/fullchain.pem'),
  key: fs.readFileSync('./ssl/privkey.pem'),
});

const wss = new WebSocketServer({ server });
const wssSecure = new WebSocketServer({ server: secureServer });

const handleConnection = (socket) => {
  socket.on('message', (msg) => {
    console.log('来自客户端：', msg.toString());
    socket.send(`服务端已收到：${Date.now()}`);
  });
};

wss.on('connection', handleConnection);
wssSecure.on('connection', handleConnection);

server.listen(8080, () => console.log('ws://localhost:8080'));
secureServer.listen(8443, () => console.log('wss://localhost:8443'));
```

- `ws://localhost:8080` 未加密
- `wss://localhost:8443` 需要证书，可以使用自签名证书测试

## 五、浏览器调用示例

```js
const socket = new WebSocket('wss://realtime.webfem.com/quote');

socket.addEventListener('open', () => {
  console.log('已连接');
  socket.send(JSON.stringify({ type: 'subscribe', symbol: 'BTCUSDT' }));
});

socket.addEventListener('message', (event) => {
  const data = JSON.parse(event.data);
  console.log('最新行情', data);
});

socket.addEventListener('close', () => console.log('连接关闭'));
socket.addEventListener('error', (err) => console.error('异常', err));
```

只需要把 URL 改成 `ws://` 或 `wss://` 即可切换，API 完全一致。
也可以通过在线测试工具，[WebSocket在线测试工具](https://webfem.com/tools/ws/),快速测试哦
![ScreenShot_2025-11-25_175605_181.png](https://developer.qcloudimg.com/http-save/yehe-2485682/aeadc8e650abdd7770f3da8d28f04be5.png)

## 六、安全性与部署建议

1. **HTTPS 页面统一使用 wss**，避免浏览器拦截。
2. 若后端在同一台服务器，可利用 **Nginx 反向代理**，统一 443 端口，将 TLS 解密交由 Nginx 完成：

```
location /socket {
    proxy_pass http://127.0.0.1:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
}
```

3. **认证**：通过查询参数、Cookie、JWT 或自定义协议字段，在握手阶段校验身份。
4. **心跳/断线重连**：客户端定期发送 ping/pong 或心跳包，配合指数退避的重连策略。

## 七、常见排障清单

- `Error during WebSocket handshake: Unexpected response code: 404`
  - 检查服务器是否正确处理 `/socket` 路径。
- `Mixed Content: The page at https://... was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint ws://...`
  - 使用 `wss://` 或在本地 HTTP 页面调试。
- 证书错误（NET::ERR_CERT_AUTHORITY_INVALID）
  - 在正式环境使用由可信 CA 签发的证书，或在开发环境信任自签名证书。

## 总结

- **ws** 对应 HTTP，**wss** 对应 HTTPS，功能一致但安全性不同。
- 现代浏览器在 HTTPS 页面强制使用 wss。
- 服务端只需在 Transport 层加上 TLS 就能提供 wss，Nginx 反代是主流做法。
- 构建实时应用时，提前规划认证、心跳与重连策略，才能让 WebSocket 链接稳定可靠。

掌握 ws 与 wss 的差异和使用场景，你就能自如地在任何业务中接入 WebSocket，实现真正实时的产品体验。

在实时通信场景（聊天、协同编辑、行情数据）里，我们经常会看到 ws:// 与 wss:// 两种协议前缀。很多同学知道它们和 WebSocket 有关，却不一定清楚到底差别在哪、与 HTTP/HTTPS 有什么关系。本篇文章将延续通过“原理 + 步骤 + 示例”的讲解方式，带你彻底搞懂 ws 与 wss。

Websocket 的 ws 协议和 wss 有什么区别

网络与通信

前端

后端

WebSocket协议中ws与wss的区别详解：ws对应HTTP（80端口明文传输），wss对应HTTPS（443端口加密传输）。现代浏览器强制HTTPS页面使用wss协议，避免安全风险。本文通过协议对比、Node.js示例和Nginx配置，教你快速实现WebSocket加密通信与安全部署方案。

敏感数据

服务器

JSON

4核4G3M云服务器 新用户低至38元/年！

2026新春采购季

domain

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Websocket 的 ws 协议和 wss 有什么区别-腾讯云开发者社区-腾讯云

Websocket 的 ws 协议和 wss 有什么区别

Websocket 的 ws 协议和 wss 有什么区别

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐