基于EmulatorJs的Docker实现Web端游玩模拟器

或许大家都见过一些在线游玩fc、gbc等老游戏的网页了，这些网页使我们随时随地都能体验并回味一波老游戏的滋味，也能在上班的时候摸鱼，曾经我思考过这些网站的实现原理，想要模仿一下，自己搭建一个在线的模拟器网站。在参考了网络上各路大神的方案后我选择基于Emulator+Docker来实现。

这里要感谢B站的一位大佬，本文的搭建思路来自于他（已获得同意，感谢）。

文章链接：怀旧游戏web端EmulatorJs的Docker搭建教程 - 哔哩哔哩 (bilibili.com)

废话不多说，我们直接开始。

你需要的

一台Linux服务器（最好是云主机，也可以是虚拟机）。

步骤

一、下载镜像文件

为了降低搭建门槛，这里我演示用宝塔来添加和管理Docker容器，关于Linux系统如何安装宝塔面板可以百度一下宝塔官网，有详细的操作流程，简单快捷。

首先让我们下载Docker

下载完毕后，启动它们（上面的绿色按钮开启），再点击下方的Dcoker管理器3.9.2。依次点击镜像管理、获取镜像、镜像名称输入linuxserver/emulatorjs:1.7.2，再点击获取镜像等待镜像下载完毕。

如果下载失败或者太慢，可以尝试设置镜像加速。加速地址https://almtd3fa.mirror.aliyuncs.com/

二、创建容器

一般情况下，用宝塔面板下载好Docker后它会自动设置好环境变量的，我们可以直接使用相关命令创建好容器，这里要注意好端口映射的问题（宿主机端口看你喜好，但是容器内端口必须是固定的80和3000）。

首先我们创建好两个文件夹，用来存放EmulatorJs容器的配置文件和数据。可以使用mkdir命令创建，也可以在宝塔面板创建。

mkdir -p /usr/local/emulatorjs/config && mkdir /usr/local/emulatorjs/data
#这里的路径看你喜好，但要记住同步更改后面的容器创建命令。

创建好两个文件后，我们接下来开始创建容器，容器的创建命令参考自官方文档与B站的克鲁斯-蓝眼大佬。

docker run -d --name emulatorjs1.7.2 -e PUID=1000 -e PGID=1000 -e TZ=Asia/Shanghai -p 8282:80 -p 8383:3000 -v /usr/local/emulatorjs/config:/config -v /usr/local/emulatorjs/data:/data linuxserver/emulatorjs:1.7.2

当然也可以通过宝塔来创建容器(还是建议运行上面命令，稳定方便)

容器创建完毕后会自动运行。

接下来我们尝试访问。

我们要选择暴露上面两个端口，这里选择的是8282和8383端口，如果你是云服务器，还需要额外设置安全组（我用的是阿里云服务器）。后记得关闭Linux系统自身的防火墙或者同步开放这两个端口。

然后我们尝试访问管理后台：访问地址是  http://服务器ip:8383。比如http://192.168.10.2:8383

成功打开如下页面后，点击Download

下载完毕后，拿出你准备好的游戏资源吧！这款模拟器支持多种格式的游戏，如gba、gbc、nes等等，各种老游戏的资源网上也有许多。现在我们尝试下上传一款nes的魂斗罗。

添加一款游戏的流程就是这样啦，接下来就是激动人心的时刻。

我们访问游玩页面：访问地址是  http://服务器ip:8282。比如http://192.168.10.2:8282

芜湖，加载成功，接下来介绍一下这个页面的操作。如果你后台上传了多款类型的游戏（比如既有gbc、又有nes），那么这里按键盘 ↑ ↓ 就是切换不同类型的模拟器。这里我只上传了nes，所以只有一种模拟器。切到你要玩的模拟器后，我们按键盘 → 就能进入该类型模拟器，然后按键盘 ↑ ↓ 就是选择游戏了，此时按键盘 ← 可以返回上一界面选择模拟器，按键盘 → 则是正式进入游戏。

如果加载完毕后还是黑屏，我们点击浏览器的返回按钮返回到选游戏的界面（也就是上面那个左边是模拟器，右边是游戏名的界面），再次按 → 键进入游戏即可秒加载成功。

当当当，忙活了这么久，你终于可以随时随地在上班的时候摸鱼了，你迫不及待想要回味一下童年，结果敲键盘aswd怎么没反应嘞？？？脏话即将脱口而出，别急，按下F1，下滑到Controls，我们设置下按钮先（这里不得不吐槽下，默认的是用↑↓←→控制方向，用左手控制攻击的异端（开个玩笑），至少我适应不了hhhhh）。

还有一种方法是back到MainMenu，再选择Settings，选择input

设置完毕后再次按F1即可关闭设置界面，然后就能愉快的玩耍了。

另外，手机浏览器打开也是能玩的（我用的小米浏览器）。

三、登录验证

此时，如果你用的是虚拟机，那么安全问题倒是不必担忧，但是如果你用的是云服务器，那么像这样直接访问就能玩游戏、进后台的话，就跟裸奔一样。

因此，你还可以选择加上一层登录认证，方法多种多样，后端写个登录服务，前端弄个登录页面。这里楼主前端本领不够写不出好看的页面，所以直接用Nginx实现登录验证。

首先，你需要下载nginx（可以上网找资源、或者宝塔面板安装）。

下载完nginx后，我们改下配置文件：

{
........
 
#添加下方server块，确保8181端口未被其它应用占用
    server {
        listen       8181;
        server_name  localhost;
        
        #开启登录校验功能
        auth_basic on;
        #htpasswd命令生成的密码文件（比如文件名admin，放到了/usr/local/nginx/password目录下）
        auth_basic_user_file /usr/local/nginx/password/admin;
        #请求体最大限制1024m，防止太小时上传大游戏失败。
        client_max_body_size 1024m;
        location / {
            root   html;
            index  index.html index.htm;
        }
        #转发到Emulator模拟器游玩页面
        location /play/ {
            proxy_pass http://localhost:8282/;
        }
        #转发到Emulator模拟器管理页面
        location /manage/ {
            proxy_pass http://localhost:8383/;
        }
    }
 
.......
}

按我上面这种配置的话，你只需要暴露8181端口，然后可以把以前暴露的8282端口和8383端口给关闭了。这样别人就只能通过8181端口访问你的网站了。

然后我们需要生成密码文件，如果你是按我上面的配置，那么就在/usr/local/nginx/password目录下运行此htpasswd命令生成admin密码文件：

#先运行这个命令，安装httpd-tools，如果你已经安装过跳过此步骤
yum install httpd-tools
#接下来运行下面这两个命令，在对应目录下生成密码文件admin，账号是username，密码是password
cd /usr/local/nginx/password
htpasswd -cb ./admin username password

接下来重新进入nginx安装目录，运行如下命令启动nginx：

./sbin/nginx -c ./conf/nginx.conf

启动成功后，访问游玩页面与管理页面，

访问地址是  http://服务器ip:8181/play 与 http://服务器ip:8181/manage。

比如http://192.168.10.2:8181/play

完成，可以把你的网站介绍给你的好基友一起上班摸鱼了。

关于Nginx的更多配置、Docker容器的更多知识，以及Emulator模拟器的更多功能，就等待大家自己探索啦。