Deepinder Singh
Deepinder Singh

Siga

Nov 25, 2019 · 7 min de leitura

Este artigo foi movido para aqui. Para a última versão deste artigo, por favor visite o link dado.

Foto por Pankaj Patel em Unsplash

Esta pode ser a mais temida pergunta entre os novos desenvolvedores sobre como fazer um aplicativo com Angular e Socket.io. Como a maioria dos aplicativos que fazem uso de sockets para comunicação em tempo real de Frontend com o Backend. Portanto, hoje vou falar sobre como integrar socket.io com uma aplicação Angular. Este código funcionaria para todas as versões angulares acima do Angular1.

actualizado — este artigo foi actualizado em dezembro de 2020 para lidar com as últimas alterações da versão v3 de socket.io

Let’s start by creating a node project first.

crie um novodirectory e depois introduza-o.

mkdir socketio-node

Isto irá criar uma pasta vazia com o nome socketio-node.vamos usar o nó.JS web framework express. Certifiquem-se do nó.O JS está instalado no seu sistema.

primeiro vamos criar um ficheiro Manifestopackage.json que descreve o nosso projecto.
Crie um arquivo chamado pacote.json e colar o código abaixo nele.(Você também pode fazê-lo com npm init)

{
"name": "socketio-node",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {}
}

Agora, a fim de facilitar a preencher o dependencies propriedade precisamos instalar o express, digite isso no terminal.

npm install express

Ele vai instalar e adicionar a versão mais recente do express para o nosso projeto e o seu dependencies aspecto agora

"dependencies": {
"express": "^4.17.1"
}

Agora que express é instalado, podemos criar uma index.js arquivo de configuração da nossa aplicação.

const app = require('express')();
const http = require('http').createServer(app);
app.get('/', (req, res) => {
res.send('<h1>Hey Socket.io</h1>');
});
http.listen(3000, () => {
console.log('listening on *:3000');
});

Este código é explicado nas etapas a seguir:

  • Express inicializa app para ser um manipulador de função que você pode fornecer para um servidor HTTP (como visto na linha 2).
  • definimos um manipulador de rotas / que é chamado quando atingimos a casa do nosso site.fazemos o Servidor http ouvir na porta 3000.

Se você executar o node index.js você deve ver o seguinte:

Abrir http://localhost:3000 no navegador ficaria como:

Agora vamos integrar soquete.io em nosso nó de aplicativo. Em primeiro lugar, precisamos instalar a dependência socket.io na nossa aplicação. Põe isto no terminal.

npm install socket.io

Isto irá instalar o módulo e adicionar a dependência a package.json. Agora vamos editar index.js para adicioná-lo:

const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http, {
cors: {
origins:
}
});app.get('/', (req, res) => {
res.send('<h1>Hey Socket.io</h1>');
});io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
});http.listen(3000, () => {
console.log('listening on *:3000');
});

Repare que eu inicializar uma nova instância de socket.io na linha 3, passando o http (servidor HTTP), o objeto e o cors opções(atualizado para o soquete.io v3) para permitir que o nosso angular localhost url, você pode colocar a url ou o seu frontend cliente, no meu caso, foi localhost:4200
Então eu escutar o connection e disconnection eventos de entrada soquetes, e eu o log para o console.

nossa infra-estrutura está pronta para ir por agora, vamos voltar para o nosso node código quando vamos implementar mais eventos mais adiante.

Let’s start by creating an Angular app now. Eu estarei criando um novo aplicativo Angular do zero, enquanto a maioria de vocês já teria um criado com você.
aqueles que já têm um workingAngular app pode ignorar o seguinte código:

npm install -g @angular/cli
ng new socketio-angular

isto iria instalar a última versão de e criar um novo aplicativo Angular a partir do zero.agora vamos adicionar socket.io dependency in our Angular app.

cd socketio-angular
npm install socket.io-client

This would install the latestsocket.io-client library in our Angular app.agora vamos começar por criar umservice para lidar socket.io ligação. I would create a root level singleton service namedsocketio.service.ts and include that inAppModule . Você pode criar o serviço de acordo com sua estrutura de projeto.
você pode criar o serviço executando o seguinte comando.

ng g s socketio

This would create a service namedsocketio.service.ts . A estrutura do Diretório se pareceria com isso. Esta é apenas uma demonstração de uma página simples, então eu adicionei o serviço na pasta base como este.

Agora, ir para o socketio.service.ts arquivo e importar os seguintes:

import { io } from 'socket.io-client';

now let’s add the socket endpoint that we would connect the socket to insideenvironment.ts file.

export const environment = {
production: false,
SOCKET_ENDPOINT: 'http://localhost:3000'
};

Agora vamos tentar conectar ao nosso socket e criar uma conexão de socket. Primeiro precisamos adicionar SocketioService no nosso AppModule e injetar o serviço em nosso app.component.ts . Vamos adicionar o serviço em nossos fornecedores primeiro. In app.module.ts do this:

@NgModule({
declarations: ,imports: ,providers: ,
bootstrap: })export class AppModule { }

And let’s go tosocketio.service.ts and write a socket init function.

export class SocketioService { socket; constructor() { } setupSocketConnection() {
this.socket = io(environment.SOCKET_ENDPOINT);
}
}

Isto irá declarar uma variável com o nome socket e, em seguida, depois de chamar o setupSocketConnection método socket variável seria contendo o soquete conectado objeto.

Now, let’s call this method from app.component.ts inside ngOnInit.

export class AppComponent implements OnInit { title = 'socketio-angular'; constructor(private socketService: SocketioService) {} ngOnInit() {
this.socketService.setupSocketConnection();
}
}

Se estiver a utilizar o Angular 6 ou superior, poderá deparar-se com este erro.

Uncaught ReferenceError: global is not defined

isto é porque na versão 6 da equipa Angular de CLI remove o shim para global e outros nós embutidos. Se estiver usando uma biblioteca que assume estes globais estão presentes(socket.io-client no nosso caso), você pode tentar manualmente, calçar-lo dentro de seu polyfills.ts ficheiro:

// Add global to window, assigning the value of window itself.
(window as any).global = window;

Adicionar esta linha ao seu polyfills.ts arquivo seria corrigir o problema e sua aplicação estaria trabalhando novamente. Para ler mais sobre a questão acima, siga este link.

Depois de executar o Angular do aplicativo agora você pode ver o soquete conectado e o nosso nó de aplicativo de console mostrando a user connected como esta:

Quando você desligue a tomada ou fechar a página, você pode ver user disconnected mensagem no console.com isso, completamos nossa inicialização de tomadas. Agora vamos aprender como emitir e ouvir os eventos.

let’s register an event called my message inside our index.js node file and console the data and we will emit the same event from Angular app.

io.on('connection', (socket) => { console.log('a user connected'); socket.on('disconnect', () => { console.log('user disconnected'); }); socket.on('my message', (msg) => { console.log('message: ' + msg); });});

E vamos emitem o mesmo evento Angular de código

setupSocketConnection() { this.socket = io(environment.SOCKET_ENDPOINT); this.socket.emit('my message', 'Hello there from Angular.');}

Este código deverá emitir o evento chamado my message e imprima o seguinte no nosso nó console. Você pode ver a mensagem ‘Hello there from Angular’. Os nossos eventos personalizados estão agora a funcionar.

Agora, vamos emit um evento a partir de server side. Vamos transmitir o evento para todos os usuários conectados. Vamos transmitir a mesma mensagem que recebemos do cliente e preparar uma string de servidor para ele.

io.on('connection', (socket) => {
socket.on('my message', (msg) => {
io.emit('my broadcast', `server: ${msg}`);
});
});

Let’s add an listener for my broadcast event on our Angular app now.

this.socket.on('my broadcast', (data: string) => {
console.log(data);
});

Depois de fazer isso, você pode verificar o broswer console, que seria print algo como isto. Imprime uma mensagem do servidor, que emite a transmissão.

Nós cobrimos o basic peças de ligação de um nó de soquete.io app com um ângulo app.dica de bónus: Você também pode enviar query parameters para a infra-estrutura ao se conectar ao socket usando options com url em uma conexão.

this.socket = io(environment.SOCKET_ENDPOINT, {
auth: {
token: 'cde'
}
});

fetch esta informação no Back-end, temos que fazer como esta:

io.on('connection', (socket) => {
let token = socket.handshake.auth.token;
});

Este deve retornar o valor de cde passou por Frontend.

pode verificar todo o código de exemplo escrito acima no meu github.

Isto conclui o meu artigo sobre a criação de uma real time application com Angular e Socket.io com NodeJS. Eu cobri obasics de conectar os aplicativos. Há muito mais informações sobre sockets que podem ser exploradas como salas, estado online offline, envio de mais dados, obtenção de usuários online. Estas informações não podem ser abrangidas por um único artigo. Will write sobre estes tópicos se você liked my work neste blog.

escreva suas opiniões.gostou do meu trabalho? Paga-me um café.

Deixe uma resposta

O seu endereço de email não será publicado.