Image for post
Image for post

WebSockets são uma ferramenta para comunicação bidirecional entre um cliente de navegador e um servidor. Em particular, os WebSockets permitem que o servidor envie dados para o cliente. Isso é diferente de sua solicitação HTTP padrão usando fetch() ou Axios porque o servidor não pode se comunicar com o cliente a menos que o cliente envie uma solicitação primeiro.

WebSockets são mais flexíveis, mas também são mais difíceis de implementar e escalar. …


Image for post
Image for post

As funções generator assíncronas são um novo recurso no ES2018. Node.js adicionou suporte para funções generator assíncrona no Node.js 10. As funções generator assíncrona podem parecer um recurso de nicho bonito, mas apresentam uma ótima oportunidade para estruturar websockets em Node.js. Neste artigo, explicarei como uma estrutura de websocket Node.js pode usar funções generator assíncronas.

Classificando frameworks HTTP

Primeiro, pense em frameworks de servidor HTTP, como Express ou Hapi . Em geral, a maioria das estruturas de servidor HTTP se enquadra em uma das 3 classes:

  1. Resposta explícita — Para enviar uma resposta HTTP no Express, você deve chamar res.end(), res.json() ou alguma outra função no objeto res. …


Image for post
Image for post

O useEffect é um poderoso hook para realizar efeitos em suas aplicações React usando a sintaxe de componentes em funções.

Ao retornar uma função dentro do useEffect estamos entrando na faze de limpeza do efeito.

Como mostra a documentação, em componentes de classe, usaríamos os ciclos de vida componentDidMount e componentWillUnmount:

class FriendStatus extends React.Component {
constructor(props) { ... }
componentDidMount() { // [ A ]
ChatAPI.subscribeToFriendStatus(
this.props.friend.id,
this.handleStatusChange
);
}
componentWillUnmount() { // [ B ]
ChatAPI.unsubscribeFromFriendStatus(
this.props.friend.id,
this.handleStatusChange
);
}
handleStatusChange(status) { ... } render() { ... }
}

O exemplo acima pode ser resumido em:

  • [ A ]: Ao montar o componente, criamos uma inscrição/escuta na API ChatAPI.subscribeToFriendStatus e iremos executar a função handleStatusChange para cada…

About

Eduardo Rabelo

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store