WebSocket 是一种基于 TCP 的网络协议，它允许客户端与服务器进行双向通信。在前端开发中，我们常用 WebSocket 实现实时通信，比如聊天室、在线游戏等。
本文将详细介绍如何使用 Docker 和 Nginx 搭建 WebSocket 服务。通过本文的学习和实践，你将学会:
- 使用 Docker Compose 管理多个容器
- 配置 Nginx 变量和反向代理 WebSocket
- 在前端应用中使用 WebSocket 进行实时通信
准备工作
在开始之前，我们需要安装 Docker 和 Docker Compose。安装方式可以参考官方文档或相关文章。
创建项目目录
我们首先创建一个项目目录，命名为 websocket-demo。
mkdir websocket-demo cd websocket-demo
在项目目录下，我们创建一个 docker-compose.yml 文件，用于管理我们的多个 Docker 容器。
-- -------------------- ---- -------
-------- ---
---------
---------
------
-------- -
----------- -------------------
------
- ---------
--------
------
-------- -
----------- ------------------
-------
- ------
------
------ ------------
------
- -------
--------
- ----------------------------------
-----------
- -------我们定义了三个服务：
frontend是前端服务，用于提供 WebSocket 页面。backend是后端服务，用于提供 WebSocket 服务。nginx是反向代理服务，用于转发 WebSocket 请求。
编写 Dockerfile
我们接着编写 Dockerfile 文件。在项目目录下创建一个名为 Dockerfile-frontend 的文件，用于构建前端服务的镜像。
-- -------------------- ---- ------- ---- -------------- ------- ---- ---- --- -- --- --- ------- --- - ------ ------- -
这里我们使用官方的 node 镜像，并安装了项目所需的依赖。然后运行 npm start 命令启动服务。
在项目目录下创建一个名为 Dockerfile-backend 的文件，用于构建后端服务的镜像。
-- -------------------- ---- ------- ---- -------------- ------- ---- ---- --- -- --- --- ------- --- - ------ ------- -
同样使用官方的 node 镜像，并安装了项目所需的依赖。然后运行 npm start 命令启动服务。
配置 Nginx
下面我们来配置 Nginx。在项目目录下创建一个名为 nginx.conf 的文件。
-- -------------------- ---- -------
---- ------
------ -
------------------ -----
-
---- -
- --------- ------------------
----------------- ----
----------------------- -----
------------------ ----
---------------- ------- --------------
---------------- ---------- ----------
---------------- ---- ------
-------- ------- -
------ -------------
-
------ -
------ ---
-------- - -
---- ----------------------
-
-------- ---- -
---------- ----------------
-
-
-这里我们设置了 proxy_set_header Upgrade $http_upgrade; 和 proxy_set_header Connection "upgrade";，用于将 HTTP 请求升级为 WebSocket 连接。
注意：反向代理的地址应该是容器名，而不是 IP 地址。
编写前端应用
最后，我们编写前端应用。在项目目录下创建一个名为 index.html 的文件。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------------- ------------
-------
------
------------- ---------
---- --------------------
--------
----- ------ - --- ----------------- - ------------- - --------
---------------------------------- ------- -- -
----- ------- - -----------------------
----- ----------- - ------------------------------------
----- ---------- - ------------------------------
-------------------- - ----------------- -----------------
------------------------------------
---
----- ---- - -------------------------------
----- ----- - --------------------------------
----- ------ - ---------------------------------
------------------------
-------------------------
---------------- - -------
-------------------------------- ------- -- -
-----------------------
----- ---- - ------------
----------- - ---
----- ------- - -
----- --------
----- -----
--
-------------------------------------
---
--------------------------------
---------
-------
-------这里使用了 WebSocket API 进行实时通信。客户端连接在前端服务上，但是 WebSocket 请求通过反向代理转发到了后端服务上。
启动服务
在项目目录下执行以下命令启动服务。
docker-compose up
然后在浏览器中访问 http://localhost:8080 即可看到示例页面。
总结
本文详细介绍了使用 Docker 和 Nginx 搭建 WebSocket 服务的过程。通过本文的学习和实践，你掌握了使用 Docker Compose 管理多个容器、Nginx 变量和反向代理 WebSocket、在前端应用中使用 WebSocket 进行实时通信等技能。希望能对你的前端开发和运维工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6476a62e968c7c53b034e731