O código fonte completo para este tutorial pode ser encontrado aqui:elliotforbes/angular-socket-io-example
Neste tutorial vamos ver como podemos construir uma aplicação em tempo real usando tanto o Angular 4 como a biblioteca Socket.io. Eu cobri no passado como você pode utilizar websockets brutos e convertê-los em observáveis usando a biblioteca RxJS em um tutorial anterior que pode ser encontrado aqui: Angular Websockets Tutorial
Video Tutorial
Installing Socket.IO
Para utilizar a biblioteca socket.io teremos primeiro que instalá-la usando o gerenciador de pacotes do nó. Podemos fazer isso digitando o seguinte:
npm install socket.io-clientnpm install @types/socket.io-clientTornar Websockets em RxJS Subjects
RxJS Subjects são tanto um Observable como um Observer. Usando estes Assuntos podemos simultaneamente ouvir e enviar mensagens para um único Websocket, isto abre a comunicação de duas maneiras e nos permite fazer coisas legais como construir sistemas de chat.
Neste cenário estaremos criando tanto um serviço Websocket quanto um serviço de Chat.O serviço Websocket irá lidar com a comunicação direta com o socket e o serviçoChat irá expor uma interface simples com a qual nossos outros componentes podem facilmente interagir.
Após termos definido este serviço Websocket, podemos então definir um serviço de chat que inclui apenas um construtor e uma função sendMsg() que será utilizada para enviar mensagens para o nosso servidor socket.io.
Usando o nosso serviço de chat
Se quiséssemos começar a usar o nosso serviço de chat recém-criado poderíamos algo parecido com isto:
Poderíamos então criar um simples botão no nosso ./app.component.html ficheiro que chamaria o nosso sendMessage() função:<button (click)="sendMessage()">Send Message</button>. Desde que você tenha especificado seus serviços recém criados no array de provedores app.module.ts, você deve ter uma aplicação que possa enviar e receber mensagens a partir de socket.io webserver.
>
nosso Websocket Server
Neste tutorial nós estaremos alavancando um socket.io muito simples baseado em expressserver que irá ouvir em para todas as conexões websocket de entrada e ao receber uma conexão ele irá imprimir que um usuário se conectou. Crie um novo arquivo chamado app.js e adicione o seguinte código:
Antes de executar este código você terá que garantir que as dependências de nó apropriadas estão instaladas. Você pode fazer isso digitando
npm i express http socket.io. Você pode executar este servidor digitandonode app.js.
Conclusion
Quando você executar isto você deve ver nosso servidor websocket imprimir algo como a saída abaixo. Primeiro começa na porta 5000, quando abrimos o nosso Angularclient você deve então ver o log user connected e depois cada vez que enviamos uma mensagem do nosso cliente você vê o conteúdo dessa mensagem a ser emitida abaixo.
$ node app.jsstarted on port 5000user connectedMessage Received: "Test Message"Message Received: "Test Message"