Criando um Chat no DELPHI utilizando Sockets

Thiago Melo — Wed, 16 Aug 2006 21:21:55 +0000

CRIANDO UM SISTEMA DE CHAT NO DELPHI

Faculdade de Alagoas (FAL)
Thiago Nascimento Melo. 3º Período.

Este é um pequeno tutorial que mostra como criar um simples sistema de CHAT, utilizando o TClientSocket e o TServerSocket, exemplificando como funciona um sistema Cliente/Servidor.

OBS: Não vou explicar neste tutorial como se coloca componentes, como renomeia e outras coisas básicas de Delphi que o Prof. Luiz Olivio explicou na sala. Este tutorial ensina apenas como utilizar os componentes do Delphi para criar um sistema de Chat (Cliente/Servidor).

Introdução
Eu estava procurando no DELPHI algum exemplo de algum sistema que utilizasse a arquitetura cliente/servidor. O mais prático que encontrei para um melhor entendimento foi os exemplos de CHAT encontrados na pasta DEMO/Internet/Chat do Delphi. (Existe outra pasta chamada NETCHAT, mas não olhei direito o que era).

Nas pasta CHAT, contem um pequeno projeto de um CHAT, que é cliente e servidor ao mesmo tempo, que utiliza Winsocket e também existe 2 pastas dentro chamadas Client e Server. No conteúdo destas pastas existe um sistema de Chat Cliente/Servidor completo, porem estes utilizam outro componente chamado TcpClient e TcpServer o que eu ainda não estudei direito.

Quando eu testei os sistemas, reparei que o sistema mais simples (Winsocket) suporta apenas uma comunicação Ponto-a-Ponto, isto quer dizer, o servidor suporta apenas 1 conexão. Neste caso ficou difícil entender então resolvi pesquisar na internet e desenvolver outro Chat utilizando Winsocket.

1ª Etapa
Para começar o Chat vamos criar a sua interface, neste caso adicione no programa os seguintes componentes:

Inserindo:
TMemo => Coloque o nome como Quadro.
Tmemo => Com nome de Status.

TGroupBox => Coloque o nome como C_Comandos
TEdit => Coloque dentro do TGroupBox (C_Comandos) com o nome de C_Texto
TEdit => Com nome de Host.
TEdit => Com nome de Apelido.
TButton => Com nome de Conectar.

TButton => Com nome de Servir.
2 Tlabel => Com caption Servidor e Apelido.

Agora adicione os seguintes componentes.
TclientSocket => Com nome de S_Cliente.
TserverSocket => Com nome de S_Server.

(VEJA FIGURA AO LADO)

Agora renomeie o Form1 para ChatFal. (Clique no Form depois vá em name e mude).

Vamos tentar deixar o Object Treeview mais ou menos assim:

Pronto agora tente organizar desta forma:

2ª Etapa

Bom nesta etapa vamos começar a programar o chat.

a) O primeiro evento que o programa irá executar será o TchatFal.FormCreate, clique 2x no formulário, e deixe este procedimento assim:

procedure TChatFal.FormCreate(Sender: TObject); {Limpa o quadro}
    begin
        Quadro.Text := '';
    end;

Explicação:

Com isto, assim que o formulário inicie, o conteúdo do componente QUADRO será apagado.

b) O segundo evento a ser programado será do componente C_Texto. Aqui vamos criar uma [i]procedure[/i] para o evento OnKeyDown (Este evento ocorre quando um texto for digitado na Tedit).

Primeiro se declara a procedure.

procedure C_TextoKeyDown(Sender: TObject; var Key: Word; Shift: TShiftState);

Depois vamos programar a procedure.

procedure TChatFal.C_TextoKeyDown(Sender: TObject; var Key: Word; Shift: TShiftState);
begin

        if Key = VK_Return then
            begin
                S_Cliente.Socket.SendText(C_Texto.Text + '::::' + Apelido.Text);
                C_Texto.Text := '';
            end;
    end;

Explicação:
Nos criamos uma procedure que utiliza uma variável “Key” do tipo Word, e declaramos também o uso do Shift (Se não declarar o uso do shift não funciona).

if Key = VK_Return then => Se a tecla digitada for igual ao [ENTER] então execute.

S_Cliente.Socket.SendText(C_Texto.Text + '::::' + Apelido.Text); => Envia o texto para o servidor no formato (Mensagem::::Apelido) este formato será explicado mais na frente.

C_Texto.Text := ''; => Limpa o conteúdo da TEdit C_Texto.

c) Vamos programar a procedure do terceiro evento. Este será para o botão “Conectar” onde ao clicar o programa irá pegar o conteúdo da Tedit “Host” e tentar conectar-se.

Clique 2x em cima do botão Conecta, e deixe da seguinte forma:

procedure TChatFal.ConectarClick(Sender: TObject);
    begin
        if S_Cliente.Active then
            begin
                S_Cliente.Active := False;

                Conectar.Caption := 'Conectar';
            end
         else begin
                S_Cliente.Host := Host.Text;
                S_Cliente.Active := True;
        end;

end;

Explicação:

if S_Cliente.Active then => Primeiro verificamos se o TclientSocket esta ativo (isto é se a conexão já esta ativa).

S_Cliente.Active := False; => Se tiver ativo ele desativa (Desconecta).

Conectar.Caption := 'Conectar'; => Altera o caption do TButton (Conectar) para 'Conectar'.

else begin => Caso a conexão já esteja desativada, isto é S_Cliente.Active = False então ele vai se conectar.

S_Cliente.Host := Host.Text; => Pega o conteudo de Host isto é o endereço IP do servidor, e coloca na propriedade Host do componete S_Cliente.

S_Cliente.Active := True; => Ativa a conexão.

3ª Etapa

Agora vamo programar os eventos do conexão do Lado Cliente.

Primeiro declare os procedimentos abaixo:

procedure S_ClienteConnect(Sender: TObject; Socket: TCustomWinSocket);

procedure S_ClienteDisconnect(Sender: TObject; Socket: TCustomWinSocket);
procedure S_ClienteError(Sender: TObject; Socket: TCustomWinSocket; ErrorEvent: TErrorEvent; var ErrorCode: Integer);
procedure S_ClienteRead(Sender: TObject; Socket: TcustomWinSocket);

Estes são os eventos do componente TclientSocket que colocamos no programas e renomamos para S_Cliente.

Agora vamo programa-los um por um.

Primeiro OnConnect.

procedure TChatFal.S_ClienteConnect(Sender: TObject; Socket: TCustomWinSocket);
    begin
        Status.Lines.Add('Cliente ::> Conectado a: ' + S_Cliente.Host);
        Conectar.Caption := 'Desconectar';

        Apelido.Enabled := False;
        S_Cliente.Socket.SendText('NICK::::' + Apelido.Text);
    end;

Explicação:
Este evento somente ocorre quando há sucesso de conexão, isto é logo após estabelecer conexão com o servidor sem erros.

Status.Lines.Add('Cliente ::> Conectado a: ' + S_Cliente.Host); => Aqui escrevemos no status Status.Lines.Add uma mensagem informando o cliente que ele teve sucesso na conexão.

Conectar.Caption := 'Desconectar'; => Muda-se o caption do TButton (Conectar) de 'conecta'r para 'desconectar', pois agora sua função será encerrar a conexão.

Apelido.Enabled := False; => Depois desabilitamos o Tedit do Apelido (Apenas para o cliente não mudar de apelido durante a conexão o que não afeta nada caso mude).

S_Cliente.Socket.SendText('NICK::::' + Apelido.Text); => Enviamos para o servidor um Texto seguindo o mesmo formato que a procedure de escrever S_Cliente.Socket.SendText. Repare que desta vez o formato muda um pouco, antes era (Mensagem::::Apelido) agora é (NICK::::Apelido). Isto serve para diferenciar o tipo de mensagem, a primeira é uma mensagem normal, a segunda informa que você entrou no servidor.

O Tratamento desses formatos fica no lado do servidor que veremos em breve.

Segundo evento é o OnDisconnect.

procedure TChatFal.S_ClienteDisconnect(Sender: TObject; Socket: TCustomWinSocket);
begin
Status.Lines.Add('Cliente ::> Desconectado ');

        Conectar.Caption := 'Conectar';
        Apelido.Enabled := True;
    end;

Explicação:

Este evento é o oposto do evento anterior, ele somente é executado quando a conexão é desfeita.

Status.Lines.Add('Cliente ::> Desconectado '); => Informamos ao cliente com uma mensagem no status Status.Lines.Add.

Conectar.Caption := 'Conectar'; => Mudamos o caption do TButton (Conectar) para "conectar".

Apelido.Enabled := True; => Habilitamos a TEdit (Apelido).

Terceiro evento é o OnError.

procedure TChatFal.S_ClienteError(Sender: TObject; Socket: TCustomWinSocket; ErrorEvent: TErrorEvent; var ErrorCode: Integer);
begin
Status.Lines.Add('Cliente ::> ERRO ao tentar conectar a: ' + S_Cliente.Host);

end;

Explicação:

Bastante simples, em caso de erro de conexão informa no status a mensagem ERRO ao tentar conectar a: ' + S_Cliente.Host.

Quarto e ultimo evento da TclientSocket, OnRead.

procedure TChatFal.S_ClienteRead(Sender: TObject; Socket: TCustomWinSocket);
    begin
        Quadro.Lines.Add(Socket.ReceiveText);
    end;

Explicação:
Este evento ocorre quando o TClientSocket recebe dados através da conexão ativa. Como a mensagem já vem formatada pelo servidor basta apenas adicionar no quadro Quadro.Lines.Add(Socket.ReceiveText); .

Pronto aqui finalizamos a programação do lado Client do nosso chat.

EDITANDO AS PROPRIEDADES DO COMPONETE TClientSocket (S_Cliente).

Agora vamos parar um pouco a programação, e vamos alterar as propriedades do nosso componente TclientSocket. Onde aqui vamos configurar a porta de comunicação e também vamos colocar os eventos que programamos nos seus devidos lugares.

Primeiro selecione o ícone do componente TclientSocket (S_Cliente) no formulário, depois vá na janela do “Object Inspector” e em propriedades coloque Active em FALSE (Para iniciar desconectado) e em Port abaixo de Name coloque a seguinte porta (666) ou outra que você quiser e que não esteja sendo usada pelo sistema.

Agora vá na aba Eventos e configure os eventos como esta abaixo na IMG.

Pronto o lado cliente já esta pronto agora vamos programar o lado servidor do nosso chat.

4ª Etapa

Nesta etapa vamos primeiro programar o evento do TButton "Servir" (Eu coloquei a caption deste botão como (Iniciar Servidor).

Clique 2x no botão para programar o evento.

procedure TChatFal.ServirClick(Sender: TObject);
    begin
        if S_Server.Active = True then
            begin
                S_Server.Active := False;

                Status.Lines.Add('Servidor ::> Servidor Desligado!');
                Servir.Caption := 'Iniciar Servidor';
                S_Cliente.Active := False;
                Host.Enabled := True;
                Conectar.Enabled := True;

            end
        else begin
                S_Server.Active := True;
                Servir.Caption := 'Parar Servidor';
                Host.Enabled := False;
                Conectar.Enabled := False;

                S_Cliente.Host := '127.0.0.1';
                S_Cliente.Active := True;
            end;
    end;

Explicação:
Primeiro da mesma forma que o botão de conectar primeiro verificamos o estado do servidor. Se ele está servindo ou esta parado.

if S_Server.Active = True then => Caso esteja ativo, isto é caso ele esteja esperando conexões na porta configurada, então vamos desligar.

S_Server.Active := False; => Desliga o servidor.

Status.Lines.Add('Servidor ::> Servidor Desligado!'); => Informa no status que o servidor foi desligado.

Servir.Caption := 'Iniciar Servidor'; => Muda o caption do TButton (Servir) para 'iniciar servidor'.

S_Cliente.Active := False; => Desativa a conexão do cliente. (Ao iniciar o servidor automaticamente o programa se conecta ao servidor).

Host.Enabled := True; => Abilita o campo de escolha do IP.

Conectar.Enabled := True; => Abilita o botão de conectar.

else begin => Caso o servidor não esta ativo, então ative.

S_Server.Active := True; => Ativa o servidor, e neste momento o servidor fica esperando conexões na porta configurada.

Servir.Caption := 'Parar Servidor'; => Muda o caption do TButton (Servir) para 'parar servidor' pois sua função agora é parar.

Host.Enabled := False; => Desativa o campo de escolha do IP (O cliente vai se conectar no localhost).

Conectar.Enabled := False; => Desativa o botão de conectar, pare evitar desconexão do cliente com o servidor local.

S_Cliente.Host := '127.0.0.1'; => Força o host do S_Cliente para localhost (127.0.0.1).

S_Cliente.Active := True; => Conecta no servidor como cliente.

O IP '127.0.0.1' Corresponde a própria maquina, neste caso ao ligar o servidor ele também se conecta como cliente e desabilita as opções de conexão, caso desligue o servidor ele também se desconecta.

Agora o passo seguinte e declarar os procedimentos dos eventos do S_Server.

procedure S_ServerListen(Sender: TObject; Socket: TCustomWinSocket);
procedure S_ServerClientConnect(Sender: TObject; Socket: TCustomWinSocket);

procedure S_ServerClientDisconnect(Sender: TObject; Socket: TCustomWinSocket);
procedure S_ServerClientRead(Sender: TObject; Socket: TcustomWinSocket);

Os eventos são parecidos com os eventos do S_Cliente com diferença que não usa o evento OnError e agora existe o evento OnListen.

Vamos aos eventos.

Primeiro o evento OnListen.

procedure TChatFal.S_ServerListen(Sender: TObject;
Socket: TCustomWinSocket);
    begin
        Status.Lines.Add('Servidor ::> Servidor Ligado!');
    end;

Explicação:
Este evento ocorre quando o servidor é ligado, isto é quando ele começar a escutar na porta determinada. Quando isto ocorre ele simplesmente escreve no status a mensagem de que o servidor está ligado. Status.Lines.Add('Servidor ::> Servidor Ligado!');

Segundo evento será o OnClientConnect.

procedure TChatFal.S_ServerClientConnect(Sender: TObject;
Socket: TCustomWinSocket);
begin
Status.Lines.Add('Servidor ::> Usuário Conectado => '+ Socket.RemoteAddress);

end;

Explicação:

Este evento ocorre quando o servidor recebe uma conexão de algum cliente. Quando isto ocorrer vamos escrever no status do servidor uma mensagem informando que um novo usuário se conectou e qual seu IP (Socket.RemoteAddress).

Status.Lines.Add('Servidor ::> Usuário Conectado => '+ Socket.RemoteAddress

Terceiro evento será o OnClientDisconnect.

procedure TChatFal.S_ServerClientDisconnect(Sender: TObject;
Socket: TCustomWinSocket);

    begin
        Status.Lines.Add('Servidor ::> Usuário Desconectado => '+ Socket.RemoteAddress);
    end;

Explicação:
Este evento ocorre quando o servidor termina uma conexão de algum cliente. Quando isto ocorrer vamos escrever no status do servidor uma mensagem informando que o usuário se desconectou e qual seu IP (Socket.RemoteAddress).
Status.Lines.Add('Servidor ::> Usuário Desconectado => '+ Socket.RemoteAddress);

Quarto e mais importante evento OnClientRead.

procedure TChatFal.S_ServerClientRead(Sender: TObject;
Socket: TCustomWinSocket);
    var texto: array[0..1] of string;
    temptexto: string;
    Index: integer;
    begin

        temptexto := Socket.ReceiveText;
        texto[0] := Copy(temptexto, 1,Pos('::::', temptexto) -1);
        texto[1] := Copy(temptexto, Pos('::::', temptexto) + Length('::::'),Length(temptexto));
        if texto[0] = 'NICK' then {Verifica se a mensagem eh de entrada}
            begin

                WITH S_Server.Socket DO BEGIN {Se a msg for de entrada avisa a todos os clientes quem entrou }
                    FOR Index := 0 TO ActiveConnections-1 DO BEGIN
                        Connections[Index].SendText(texto[1] + ' entrou na sala: ');
                    END;
                END;
            end

else

            begin
                WITH S_Server.Socket DO BEGIN {Se nao for de entrada, então eh msg normal, no caso passa para todos a msg}
                    FOR Index := 0 TO ActiveConnections-1 DO BEGIN
                        Connections[Index].SendText('(' + texto[1] + ') escreveu: ' + texto[0]);
                    END;
                END;

Status.Lines.Add('Servidor ::> ' + texto[1] + ' (' + Socket.RemoteAddress + ') escreveu: '+ texto[0]);
end;

end;

Explicação

Este evento é o mais importante do chat, pois é nele que realmente o chat irá funcionar. O evento ocorre quando o servidor recebe dados do cliente, neste caso ele terá que receber a mensagem e repassar para todos os clientes conectados (Broadcasting).

Esta parte foi difícil desenvolver, pois no exemplo que vem no Delphi (WinSocket) ele não envia para todos os usuários a mensagem, ele apenas adiciona na Memo a informação recebida.

Depois de uma boa pesquisada no GOOGLE sobre WinSocket eu achei uma solução funcional.

Bom vamos passo a passo do código.

var texto: array[0..1] of string; => Este array será necessária para formatação dos dados.

temptexto: string; => Está variável será necessária para formatação dos dados.

Index: integer; => Variável de controle para o loop de broadcast.

temptexto := Socket.ReceiveText; => Variável temptexto recebe os dados enviados pelo cliente Socket.ReceiveText.

texto[0] := Copy(temptexto, 1,Pos('::::', temptexto) -1); => Separa a informação em duas partes, texto[0] pega tudo que estiver antes do separador '::::' (Lembre-se do formato de envio). OBS: Procure no HELP do Delphi explicações sobre as funções Pos, Length e Copy. Pois são muito uteis.

texto[1] := Copy(temptexto, Pos('::::', temptexto) + Length('::::'),Length(temptexto)); => Aqui texto[1] pega tudo que estiver depois do separador '::::'.

if texto[0] = 'NICK' then => Se o que estiver antes de '::::' for NICK então foi mensagem de entrada.

WITH S_Server.Socket DO BEGIN => Bom aqui eu estou dizendo que com o Objeto S_Server.Socket Faça. No help do Delphi tem uma explicação sobre 'WITH'.

FOR Index := 0 TO ActiveConnections-1 DO BEGIN=> Um laço usando FOR, até o final das conexões. (ActiveConnections vem do objeto S_Server através do WITH).

Connections[Index].SendText(texto[1] + ' entrou na sala: '); => Vai enviando mensagens para todas as conexões da primeira até a ultima, informando quem entrou no servidor.

Else => Se não for 'NICK' o que vem antes do separador '::::', então deve ser mensagem.

WITH S_Server.Socket DO BEGIN => Denovo WITH.

FOR Index := 0 TO ActiveConnections-1 DO BEGIN => Laço de 0 até o final das conexões.

Connections[Index].SendText('(' + texto[1] + ') escreveu: ' + texto[0]); => Envia para todas as conexões a mensagem enviada.

Status.Lines.Add('Servidor ::> ' + texto[1] + ' (' + Socket.RemoteAddress + ') escreveu: '+ texto[0]); => Adiciona no status do servidor uma cópia da mensagem.

Pronto agora terminamos de programar os eventos do componente S_Server. Agora vamos editar suas propriedades no Object Inspector da mesma forma que configuramos o S_Client.

Deixamos Active = False
e Port = 666 (Ou a porta que você usou no S_Client).

e os eventos (Events)

OnClientConnect = S_ServerClientConnect
OnClientDisconnect = S_ServerClientDisconnect
OnClientRead = S_ServerClientRead
OnListen = S_ServerListen

O resto dos eventos ficam em branco como na imagem abaixo:

TESTANDO O CHAT

Pronto salve tudo e compile, agora vá na pasta em que o programa foi compilado e abra 3 janelas do programa.

No primeiro coloque o apelido como Administrador e clique em iniciar o Servidor.
No segundo coloque como usuario1 digite o endereço local (127.0.0.1) e clique em conectar.
No Terceiro coloque como usuario2 digite o endereço local (127.0.0.1) e clique em conectar.

Pronto agora teste a comunicação entre os 3.

Bom espero que tenha funcionado seu CHAT, você pode baixar o código fonte completo do chat e a versão binária do mesmo neste link abaixo:

http://reiserfs.killermonkeys.net/Thiago/Delphi/xhat/c_h_a_t_f_a_l.zip

(O nome do arquivo esta separado por _ para evitar de ser bloqueado pelo Proxy da rede da FAL.)

Links de referência usados:
http://www.guiadodelphi.com.br
http://www.delphi-forum.de

Este tutorial pode ser reproduzido e publicado livremente, desde que se mantenha os créditos do autor.
12 de Março de 2005.
Thiago Melo
(thiago@dolphinconsult.com.br).

Thiago Melo » Delphi

Criando um Chat no DELPHI utilizando Sockets