[Web] OTClient Redemption

About the project:

OTClient Redemption adapted to run on web browsers (WebGL2), used to connect to OT Servers with websockets support (via proxy or native). Adapted by OTArchive / OTServList Brasil.

Servers already using the client:

First server to deploy: arm.skalski.pro - ThaisWar with bots 8.6 OTS (by Gesior.pl!)

Create account: https://arm.skalski.pro/?subtopic=createaccount

Client: https://webclient.otarchive.com/?gameData=https://downloads-oracle.ots.me/data/MehahWeb860/otclient-otarchive_2024_10_16.zip&version=4eed1a1

Testing the demo:

To check if the base client opens in your browser, go to the demo. This version does not contain assets, so it is not suitable for connecting to servers. Source of the demo.

Testing the modular version:

Ideally you will compile your own version with the necessary files preloaded as in the demo, including your assets. That said, you can quickly test the full OTClient Web using the modular version of OTArchive. With this version you can use your own assets and connect to a server.

Prerequisites:

You will need a .zip file containing the init.lua, the data, modules and other folders that you will use. Use OTClient Redemption compatible files.

Change in to point to the ip and port of the game world of the server you want to connect to, example:g_game.loginWorldmodules/client_entergame/characterlist.lua

g_game.loginWorld(G.account, G.password, charInfo.worldName, 'testserver.otarchive.com', 443,
                      charInfo.characterName, G.authenticatorToken, G.sessionKey)

The default port of the game world is 7172, if it doesn't change, it will be automatically redirected to 443.

There are two options:

.zip local
Remote .zip

For a quick test, use the zip stored on your computer to install the files and launch the client.

If you want to perform shared tests with more people, you can choose to make the .zip file available for download on your server, through a direct link. To use this option, it will be necessary for the server to use HTTPS and deliver the file with the Header Access-Control-Allow-Origin: https://webclient.otarchive.com, so that OTArchive can download and install automatically. If your web server supports .htaccess files, you can create one with the following content:

Header set Access-Control-Allow-Origin "https://webclient.otarchive.com"
AddType application/zip .zip

Place the .htaccess file in the same folder as the .zip file.

Installation:

Access OTClient Web Modular
Install the files using the desired method
- .zip location: Click "Open" and select the file .zip on your computer.
- Remote .zip: Add the gameData parameter pointing to the download link of the .zip file in the URL and go to. Example:
```
https://webclient.otarchive.com/?gameData=https://dominio/pasta/otclient.zip
```

Connection:

With the files installed, the "Play" option will appear. If your files are ok, the client will open and be ready for use. The modular version uses port 443 for connection (instead of 7172). In order for the client to connect, the login and game server must use SSL/TLS.

A video showing the demo and then the modular version connecting: https://www.youtube.com/watch?v=sGuYmr728eY

Compiling:

Compile your own version with your preloaded files for faster download and start!

Warning: Development and testing carried out in a Windows environment. Adaptations to commands may be necessary.

Steps:

Install Emscripten (emsdk)
- Make sure the command is recognized after installation.emmake
Install vcpkg
- Cloning the repository and running bootstrap-vcpkg is sufficient.
Download LUA 5.1 compiled for WASM or compile using make and emscripten.
- Move the source code and compiled lib or extract the downloaded lua51 folder to browser/include/lua51
- Luajit doesn't work on browsers, so we'll need to use LUA 5.1. Also, version 5.1 is not available in vcpkg.
- To compile with emscripten, edit the file and change the field to . Compile using:MakefileCC= gccCC= emcc

emmake make posix

Install CMake
Install Ninja
- Create the NINJA environment variable by pointing to the folder containing the ninja.exe
- Include the variable in Path
Clear the vcpkg builds that are cached, if you have used vcpkg before. This may be necessary to ensure that pthread patches apply correctly. So, if you have used vcpkg before, delete the folder C:\Users\Usuario\AppData\Local\vcpkg

Compile the debug version client

With the debug version, you will be able to test locally by accessing via no SSL/TLS. Localhost is the only way to test without needing a certificate, as browsers require it.localhost
Navigate to the OTClient folder
To compile, we need to combine vcpkg and emscripten settings, so modify the command to the correct paths on your PC:

cmake -G Ninja -S . -B build "-DVCPKG_CHAINLOAD_TOOLCHAIN_FILE=C:\emsdk\upstream\emscripten\cmake\Modules\Platform\Emscripten.cmake" "-DCMAKE_TOOLCHAIN_FILE=C:\vcpkg\scripts\buildsystems\vcpkg.cmake" "-DVCPKG_TARGET_TRIPLET=wasm32-emscripten" "-DVCPKG_OVERLAY_PORTS=C:\otclient\browser\overlay-ports" "-DCMAKE_MAKE_PROGRAM=NINJA" "-DOPTIONS_ENABLE_IPO=OFF" "-DTOGGLE_BIN_FOLDER=ON" "-DCMAKE_BUILD_TYPE=Debug"

Then start the build:

cmake --build build

The files will be available in , for testing runbuild/bin

emrun build/bin/otclient.html

Build the client release
- Change to in the above command."-DCMAKE_BUILD_TYPE=Debug""-DCMAKE_BUILD_TYPE=Release"
- This version will only be able to communicate with servers via HTTPS and WSS.

Testing locally:

With the debug version, you can test locally by connecting via localhost. In my tests I used MariaDB, Canary and login-server with modification to send CORS headers (necessary).

To send a request and get a response from a domain other than the originating one, you need to use CORS headers. For example, login-server-cors appends, among others, the header to allow requests from any source.access-control-allow-origin: *

The second thing needed is websockets support. Luckily, there are programs that automatically proxy to, such as Websockify. By default, the port that the client will use to connect to the game will be and is set to . We can then configure Websockify to proxy websocket requests from the port to the :websocketsposix sockets7979src/CMakeLists.txt79797172

websockify -v localhost:7979 localhost:7172

Use the command to test, as mentioned in the build guide.emrun

If you want to test your own web server to deliver the and other files, you will need to define some headers that it already does automatically:otclient.htmlemrun

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

These headers are required for the browser to allow access to , something the client needs to work with pthreads. If your server supports .htaccess, you can use the following configuration:SharedArrayBuffers

Header set Cross-Origin-Embedder-Policy "require-corp"
Header set Cross-Origin-Opener-Policy "same-origin"
Header set Cross-Origin-Resource-Policy "cross-origin"

AddType application/wasm .wasm
AddType application/octet-stream .data
AddType application/javascript .js

Deploying the Release version:

When making your client available on the web, it will need to open via HTTPS and use the headers mentioned above. Depending on your configuration, you will also need to deliver the files and with the correct header..wasm.dataContent-Type

application/wasm para .wasm
application/octet-stream para .data

Remembering that connections will now only work through HTTPS and WSS, so your server needs to be supported.

Websocket server example:

MariaDB + Canary + AAC + nginx + websockify + cloudflare This option is not recommended for medium/large servers and should only be used for testing.

Cloudflare allows WSS connections, but can limit it depending on usage. (Free)

By using nginx to proxy and Cloudflare with Flexible SSL, we can easily set up secure connections for our endpoints.

Example nginx configuration to receive wss connections on port 443 and send to 7979 (which websockify will be listening to):

server {
        listen 80;
        listen [::]:80;
        server_name server.exemplo.com;
        location / {
          # redirect all HTTP traffic to localhost:7979
          proxy_pass http://localhost:7979;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header Host $host;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

          # WebSocket support
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "upgrade";
  }
}

If you are going to use this configuration, configure your client to use port 443 (example above, in the modular client section, characterlist.lua file).

Nginx configuration example for your AAC running on port 3000:

server {
        listen 80;
        listen [::]:80;
        server_name testaac.otarchive.com;
        location / {
          proxy_pass http://localhost:3000;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header Host $host;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          if ($request_method = OPTIONS ) {
            add_header 'Access-Control-Allow-Origin'  '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, HEAD';
            add_header 'Access-Control-Allow-Headers' 'Authorization, Origin, X-Requested-With, Content-Type, Accept';
            return 200;
          }

          #if ($request_method ~* '(GET|POST)') {
            #add_header 'Access-Control-Allow-Origin' '*';
          #}
  }
}

You can also choose to configure headers using Cloudflare Transformation Rules.

Alternatives:

You can use Let's Encrypt certificates and configure them on your web server and in Websockify so that they receive the connections directly.

Customization:

Change the file to customize the html page that will be generated. Use mods and lua modules as usual.browser/shell.html

Web Category at OTServList Brazil:

Have you made a web client available to your players? Send an email to contato@otservlist.com.br and we'll add your server to the category with a "Play Now" button.

Credits:

OT Archive.

Last updated 1 month ago