Skip to content

Guia ‐ OTClient Redemption Web

Jump to bottom
OT Archive edited this page Oct 29, 2024 · 34 revisions

Guia - OTClient Redemption Web

Sumário
  1. Sobre o projeto
  2. Testando a demo
  3. Testando a versão modular
  4. Compilando
  5. Testando localmente
  6. Fazendo o deploy da versão Release
  7. Customização
  8. Categoria Web na OTServList Brasil

Sobre o projeto

OTClient Redemption adaptado para rodar em navegadores web (WebGL2), utilizado para se conectar a OT Servers com suporte a websockets (via proxy ou nativo). Adaptado por OTArchive / OTServList Brasil.

(voltar ao topo)

Servidores já utilizando o client

Primeiro servidor a implementar: arm.skalski.pro - ThaisWar with bots 8.6 OTS (by Gesior.pl!)

Criar conta: 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

(voltar ao topo)

Testando a demo

Para verificar se o client base abre em seu navegador, acesse a demo. Essa versão não contém assets, então não serve para conectar em servidores.
Source da demo.

(voltar ao topo)

Testando a versão modular

Idealmente você irá compilar sua própria versão com os arquivos necessários pré-carregados como na demo, incluindo seus assets. Dito isso, você consegue testar rapidamente o OTClient Web completo, utilizando a versão modular do OTArchive. Com essa versão você pode utilizar seus próprios assets e se conectar a um servidor.

Pré-requisitos

Você vai precisar de um arquivo .zip contendo o init.lua, as pastas data, modules e demais que irá utilizar. Utilize arquivos compatíveis com o OTClient Redemption.

Altere g_game.loginWorld em modules/client_entergame/characterlist.lua para apontar para o ip e porta do game world do server que deseja se conectar, exemplo:

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

A porta padrão do game world é a 7172, se não alterar, ela será automaticamente redirecionada para a 443.

Existem duas opções:

  • .zip local
  • .zip remoto

Para um teste rápido, utilize o zip armazenado em seu computador para instalar os arquivos e iniciar o client.

Se desejar realizar testes compartilhados com mais pessoas, poderá optar por disponibilizar o arquivo .zip para download em seu servidor, por meio de link direto. Para utilizar essa opção, será necessário que o servidor utilize HTTPS e entregue o arquivo com a Header Access-Control-Allow-Origin: https://webclient.otarchive.com, para que o OTArchive possa baixar e instalar automaticamente. Caso seu servidor web tenha suporte para arquivos .htaccess, você poderá criar um com o seguinte conteúdo:

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

Coloque o arquivo .htaccess na mesma pasta do arquivo .zip.

Instalação

  1. Acesse o OTClient Web Modular
  2. Instale os arquivos utilizando o método desejado
    • .zip local: clique em "open" e selecione o arquivo .zip em seu computador.
    • .zip remoto: adicione o parâmetro gameData apontando para o link de download do arquivo .zip na URL e acesse. Exemplo:
    https://webclient.otarchive.com/?gameData=https://dominio/pasta/otclient.zip

Conexão

Com os arquivos instalados, a opção "Play" irá aparecer. Se seus arquivos estiverem ok, o client irá abrir e estará pronto para uso.
A versão modular utiliza a porta 443 para conexão (no lugar da 7172). Para que o client possa se conectar, é necessário que o servidor de login e de jogo utilize SSL/TLS.

Um vídeo mostrando a demo e depois a versão modular conectando: https://www.youtube.com/watch?v=sGuYmr728eY

(voltar ao topo)

Compilando

Compile sua própria versão com seus arquivos pré-carregados para download e início mais rápidos!

Aviso: Desenvolvimento e testes realizados em ambiente Windows. Adaptações em comandos podem ser necessárias.

Etapas

  1. Instale o Emscripten (emsdk)

    • Certifique-se de que o comando emmake é reconhecido após a instalação.

  2. Instale o vcpkg

    • Clonar o repositório e rodar bootstrap-vcpkg é suficiente.

  3. Baixe LUA 5.1 compilado para WASM ou compile utilizando make e o emscripten.

    • Mova o código fonte e a lib compilada ou extraia a pasta baixada lua51 para browser/include/lua51
    • Luajit não funciona em navegadores, então precisaremos usar o LUA 5.1. Além disso, a versão 5.1 não está disponível no vcpkg.
    • Para compilar com o emscripten, edite o arquivo Makefile e altere o campo CC= gcc para CC= emcc. Compile utilizando:
emmake make posix

  1. Instale o CMake

  2. Instale o Ninja

    • Crie a variável de ambiente NINJA apontando para a pasta contendo o ninja.exe Screenshot 2024-10-29 133508

    • Inclua a variável em Path
      Screenshot 2024-10-29 133615 Screenshot 2024-10-29 133706

  3. Limpe as compilações do vcpkg que estão em cache, caso já tenha usado o vcpkg outras vezes. Isso pode ser necessário para garantir que os patches de pthread apliquem corretamente. Então, caso já tenha usado o vcpkg antes, delete a pasta C:\Users\Usuario\AppData\Local\vcpkg

  4. Compile o client versão debug

    • Com a versão debug, você conseguirá testar localmente acessando via localhost sem SSL/TLS. Localhost é a única maneira de testar sem precisar de certificado, pois os navegadores exigem.
    • Navegue até a pasta do OTClient
    • Para compilar, precisamos combinar configurações do vcpkg e emscripten, então modifique o comando para os caminhos corretos em seu 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"
    • Em seguida, inicie a compilação:
    cmake --build build
    • Os arquivos estarão disponíveis em build/bin, para testar execute
    emrun build/bin/otclient.html

  5. Compile o client versão release

    • Altere "-DCMAKE_BUILD_TYPE=Debug" para "-DCMAKE_BUILD_TYPE=Release" no comando acima.
    • Essa versão só poderá se comunicar com servidores via HTTPS e WSS.

(voltar ao topo)

Testando localmente

Com a versão debug, você consegue testar localmente conectando-se via localhost. Em meus testes utilizei MariaDB, Canary e login-server com modificação para enviar headers CORS (necessário).

Para enviar uma requisição e obter uma resposta de um domínio diferente do de origem, é necessário o uso de headers CORS. Por exemplo, o login-server-cors acrescenta, entre outras, a header access-control-allow-origin: * para permitir solicitações de qualquer origem.

A segunda coisa necessária é suporte a websockets. Por sorte, existem programas que fazem proxy automático de websockets para posix sockets, como o Websockify.

Por padrão a porta que o client vai utilizar para se conectar ao jogo será a 443, caso não altere em characterlist.lua conforme mencionado anteriormente.

Altere para, por exemplo, 7979 para testar localmente:

g_game.loginWorld(G.account, G.password, charInfo.worldName, localhost, 7979,
                      charInfo.characterName, G.authenticatorToken, G.sessionKey)

Podemos então, configurar o Websockify para fazer proxy de requisições websocket da porta 7979 para a 7172:

websockify -v localhost:443 localhost:7172

Utilize o comando emrun para testar, conforme mencionado no guia de compilação.

Caso deseje testar seu próprio servidor web para entregar o otclient.html e demais arquivos, será necessário definir algumas headers que o emrun já faz automaticamente:

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

Essas headers são necessárias para que o navegador permita acesso a SharedArrayBuffers, algo que o client precisa para funcionar com pthreads. Caso o servidor tenha suporte a .htaccess, você pode utilizar a seguinte configuração:

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

(voltar ao topo)

Fazendo o deploy da versão Release

Quando for disponibilizar seu client na web, ele precisará abrir via HTTPS e utilizar as headers mencionadas anteriormente. Dependendo da sua configuração, também será necessário entregar os arquivos .wasm e .data com o a header Content-Type correta.

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

Lembrando que as conexões agora só funcionarão por meio de HTTPS e WSS, então seu server precisa ter suporte.

Exemplo de server websocket

MariaDB + Canary + AAC + nginx + websockify + cloudflare Essa opção não é recomendada para servidores médios/grandes e deve servir apenas para testes.

A cloudflare permite conexões wss, mas pode limita-la dependendo do uso. (Free)

Utilizando o nginx para fazer proxy e a Cloudflare com SSL Flexível, podemos facilmente configurar conexões seguras para nossos endpoints.

Exemplo de configuração nginx para receber conexões wss na porta 443 e enviar para a 7979 (a qual o websockify estará ouvindo):

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";
  }
}

Se for utilizar essa configuração, configure seu client para utilizar a porta 443 (exemplo acima, na seção do client modular, arquivo characterlist.lua).

Exemplo de configuração nginx para seu AAC funcionando na porta 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' '*';
          #}
  }
}

Você também pode optar por configurar as headers utilizando as Regras de Transformação da Cloudflare.

Alternativas

Você pode utilizar certificados Let's Encrypt e configura-los em seu servidor web e no Websockify para que eles recebam as conexões diretamente.

(voltar ao topo)

Customização

Altere o arquivo browser/shell.html para customizar a página html que será gerada. Utilize mods e módulos lua conforme de costume.

(voltar ao topo)

Categoria Web na OTServList Brasil

Disponibilizou um client web para seus jogadores? Envie um email para contato@otservlist.com.br e adicionaremos o seu servidor na categoria, com um botão "Jogar Agora".

(voltar ao topo)

Clone this wiki locally