[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
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
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:
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:
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
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:
Then start the build:
The files will be available in , for testing run
build/bin
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
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
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
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
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):
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:
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