mult-api-client

v1.1.4

Published

4 months ago

O `SocketClient` é um módulo que permite a conexão com um servidor socket.io, enviando e recebendo mensagens e atualizando a contagem de usuários online. Este guia explica como integrar e usar o módulo em suas páginas HTML.

Downloads

0High
0Medium
0Low

lexluthordev

Documentação do Módulo `SocketClient` Mult-Api-Client

Introdução

O SocketClient é um módulo que permite a conexão com um servidor socket.io, enviando e recebendo mensagens e atualizando a contagem de usuários online. Este guia explica como integrar e usar o módulo em suas páginas HTML.

Executar: npx webpack --config webpack.config.js

Passos para Integrar o Módulo

1. Incluir as Bibliotecas Necessárias

No cabeçalho ou corpo da sua página HTML, adicione os seguintes scripts:

Biblioteca socket.io
Script do SocketClient

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Teste do Módulo SocketClient</title>
  </head>
  <body>
    <div>
      <p>Usuários online: <span id="onlineCount">0</span></p>
      <input
        type="text"
        id="broadcastMessage"
        placeholder="Digite sua mensagem"
      />
      <button id="sendBroadcast">Enviar Mensagem</button>
    </div>

    <!-- Inclua a biblioteca socket.io -->
    <script
      src="https://cdn.socket.io/4.7.5/socket.io.min.js"
      integrity="sha384-2huaZvOR9iDzHqslqwpR87isEmrfxqyWOF7hr7BY6KG0+hVKLoEXMPUJw3ynWuhO"
      crossorigin="anonymous"
    ></script>

    <!-- Inclua o script do SocketClient -->
    <script src="https://cdn.jsdelivr.net/npm/mult-api-client/dist/socketClient.js"></script>

    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const dominio = window.location.hostname;
        const config = {
          clientId: "www.lexdevfull.com.br", // Substitua pelo seu domínio cadastrado na nossa Api clientId
          socketUrl: "www.multapi.site",
        };

        const socketClient = new SocketClient(config);
        socketClient.initializeSocket();

        // Atualiza a contagem de usuários online
        socketClient.setOnlineCountUpdateCallback((count) => {
          document.getElementById("onlineCount").textContent = count;
        });

        // Envia uma mensagem de broadcast
        document
          .getElementById("sendBroadcast")
          .addEventListener("click", () => {
            const message = document.getElementById("broadcastMessage").value;
            if (message) {
              socketClient.sendMessage({ broadcast: true, text: message });
              document.getElementById("broadcastMessage").value = "";
            }
          });
      });
    </script>
  </body>
</html>

2. Configuração do Cliente

Dentro do script, configure o cliente fornecendo o clientId e a URL do servidor socket.io:

const config = {
  clientId: "www.lexdevfull.com.br", // Substitua pelo seu domínio cadastrado na nossa Api clientId
  socketUrl: "www.multapi.site",
};

const socketClient = new SocketClient(config);
socketClient.initializeSocket();

3. Atualização de Contagem de Usuários Online

Defina um callback para atualizar a contagem de usuários online na página:

neste exemplo, atualiza o elemento #onlineCount

socketClient.setOnlineCountUpdateCallback((count) => {
  document.getElementById("onlineCount").textContent = count;
});

4. Envio de Mensagens

Adicione um evento para enviar mensagens de broadcast quando o botão for clicado:

neste exemplo, usamos o elemento #sendBroadcast e o elemento #broadcastMessage

document.getElementById("sendBroadcast").addEventListener("click", () => {
  const message = document.getElementById("broadcastMessage").value;
  if (message) {
    socketClient.sendMessage({ broadcast: true, text: message });
    document.getElementById("broadcastMessage").value = "";
  }
});

Conclusão

Seguindo esses passos, você poderá integrar o SocketClient em suas páginas HTML para se comunicar com a nossa Mult-Api, gerenciar a contagem de usuários online e enviar mensagens. Se tiver qualquer dúvida ou problema, entre em contato com o suporte.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Documentação do Módulo SocketClient Mult-Api-Client