|
| 1 | +# WebSockets |
| 2 | + |
| 3 | +Você pode usar <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API" class="external-link" target="_blank">WebSockets</a> com **FastAPI**. |
| 4 | + |
| 5 | +## Instalando `WebSockets` |
| 6 | + |
| 7 | +Garanta que você criou um [ambiente virtual](../virtual-environments.md){.internal-link target=_blank}, o ativou e instalou o `websockets`: |
| 8 | + |
| 9 | +<div class="termy"> |
| 10 | + |
| 11 | +```console |
| 12 | +$ pip install websockets |
| 13 | + |
| 14 | +---> 100% |
| 15 | +``` |
| 16 | + |
| 17 | +</div> |
| 18 | + |
| 19 | +## Cliente WebSockets |
| 20 | + |
| 21 | +### Em produção |
| 22 | + |
| 23 | +Em seu sistema de produção, você provavelmente tem um frontend criado com um framework moderno como React, Vue.js ou Angular. |
| 24 | + |
| 25 | +E para comunicar usando WebSockets com seu backend, você provavelmente usaria as utilidades do seu frontend. |
| 26 | + |
| 27 | +Ou você pode ter um aplicativo móvel nativo que se comunica diretamente com seu backend WebSocket, em código nativo. |
| 28 | + |
| 29 | +Ou você pode ter qualquer outra forma de comunicar com o endpoint WebSocket. |
| 30 | + |
| 31 | +--- |
| 32 | + |
| 33 | +Mas para este exemplo, usaremos um documento HTML muito simples com algum JavaScript, tudo dentro de uma string longa. |
| 34 | + |
| 35 | +Esse, é claro, não é o ideal e você não o usaria para produção. |
| 36 | + |
| 37 | +Na produção, você teria uma das opções acima. |
| 38 | + |
| 39 | +Mas é a maneira mais simples de focar no lado do servidor de WebSockets e ter um exemplo funcional: |
| 40 | + |
| 41 | +```Python hl_lines="2 6-38 41-43" |
| 42 | +{!../../docs_src/websockets/tutorial001.py!} |
| 43 | +``` |
| 44 | + |
| 45 | +## Criando um `websocket` |
| 46 | + |
| 47 | +Em sua aplicação **FastAPI**, crie um `websocket`: |
| 48 | + |
| 49 | +{*../../docs_src/websockets/tutorial001.py hl[46:47]*} |
| 50 | + |
| 51 | +/// note | Detalhes Técnicos |
| 52 | + |
| 53 | +Você também poderia usar `from starlette.websockets import WebSocket`. |
| 54 | + |
| 55 | +A **FastAPI** fornece o mesmo `WebSocket` diretamente apenas como uma conveniência para você, o desenvolvedor. Mas ele vem diretamente do Starlette. |
| 56 | + |
| 57 | +/// |
| 58 | + |
| 59 | +## Aguardar por mensagens e enviar mensagens |
| 60 | + |
| 61 | +Em sua rota WebSocket você pode esperar (`await`) por mensagens e enviar mensagens. |
| 62 | + |
| 63 | +{*../../docs_src/websockets/tutorial001.py hl[48:52]*} |
| 64 | + |
| 65 | +Você pode receber e enviar dados binários, de texto e JSON. |
| 66 | + |
| 67 | +## Tente você mesmo |
| 68 | + |
| 69 | +Se seu arquivo for nomeado `main.py`, execute sua aplicação com: |
| 70 | + |
| 71 | +<div class="termy"> |
| 72 | + |
| 73 | +```console |
| 74 | +$ fastapi dev main.py |
| 75 | + |
| 76 | +<span style="color: green;">INFO</span>: Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit) |
| 77 | +``` |
| 78 | + |
| 79 | +</div> |
| 80 | + |
| 81 | +Abra seu navegador em: <a href="http://127.0.0.1:8000" class="external-link" target="_blank">http://127.0.0.1:8000</a>. |
| 82 | + |
| 83 | +Você verá uma página simples como: |
| 84 | + |
| 85 | +<img src="/img/tutorial/websockets/image01.png"> |
| 86 | + |
| 87 | +Você pode digitar mensagens na caixa de entrada e enviá-las: |
| 88 | + |
| 89 | +<img src="/img/tutorial/websockets/image02.png"> |
| 90 | + |
| 91 | +E sua aplicação **FastAPI** com WebSockets responderá de volta: |
| 92 | + |
| 93 | +<img src="/img/tutorial/websockets/image03.png"> |
| 94 | + |
| 95 | +Você pode enviar (e receber) muitas mensagens: |
| 96 | + |
| 97 | +<img src="/img/tutorial/websockets/image04.png"> |
| 98 | + |
| 99 | +E todas elas usarão a mesma conexão WebSocket. |
| 100 | + |
| 101 | +## Usando `Depends` e outros |
| 102 | + |
| 103 | +Nos endpoints WebSocket você pode importar do `fastapi` e usar: |
| 104 | + |
| 105 | +* `Depends` |
| 106 | +* `Security` |
| 107 | +* `Cookie` |
| 108 | +* `Header` |
| 109 | +* `Path` |
| 110 | +* `Query` |
| 111 | + |
| 112 | +Eles funcionam da mesma forma que para outros endpoints FastAPI/*operações de rota*: |
| 113 | + |
| 114 | +{*../../docs_src/websockets/tutorial002_an_py310.py hl[68:69,82]*} |
| 115 | + |
| 116 | +/// info | Informação |
| 117 | + |
| 118 | +Como isso é um WebSocket, não faz muito sentido levantar uma `HTTPException`, em vez disso levantamos uma `WebSocketException`. |
| 119 | + |
| 120 | +Você pode usar um código de fechamento dos <a href="https://tools.ietf.org/html/rfc6455#section-7.4.1" class="external-link" target="_blank">códigos válidos definidos na especificação</a>. |
| 121 | + |
| 122 | +/// |
| 123 | + |
| 124 | +### Tente os WebSockets com dependências |
| 125 | + |
| 126 | +Se seu arquivo for nomeado `main.py`, execute sua aplicação com: |
| 127 | + |
| 128 | +<div class="termy"> |
| 129 | + |
| 130 | +```console |
| 131 | +$ fastapi dev main.py |
| 132 | + |
| 133 | +<span style="color: green;">INFO</span>: Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit) |
| 134 | +``` |
| 135 | + |
| 136 | +</div> |
| 137 | + |
| 138 | +Abrar seu browser em: <a href="http://127.0.0.1:8000" class="external-link" target="_blank">http://127.0.0.1:8000</a>. |
| 139 | + |
| 140 | +Lá você pode definir: |
| 141 | + |
| 142 | +* O "Item ID", usado na rota. |
| 143 | +* O "Token" usado como um parâmetro de consulta. |
| 144 | + |
| 145 | +/// tip | Dica |
| 146 | + |
| 147 | +Perceba que a consulta `token` será manipulada por uma dependência. |
| 148 | + |
| 149 | +/// |
| 150 | + |
| 151 | +Com isso você pode conectar o WebSocket e então enviar e receber mensagens: |
| 152 | + |
| 153 | +<img src="/img/tutorial/websockets/image05.png"> |
| 154 | + |
| 155 | +## Lidando com desconexões e múltiplos clientes |
| 156 | + |
| 157 | +Quando uma conexão WebSocket é fechada, o `await websocket.receive_text()` levantará uma exceção `WebSocketDisconnect`, que você pode então capturar e lidar como neste exemplo. |
| 158 | + |
| 159 | +{*../../docs_src/websockets/tutorial003_py39.py hl[79:81]*} |
| 160 | + |
| 161 | +Para testar: |
| 162 | + |
| 163 | +* Abrar o aplicativo com várias abas do navegador. |
| 164 | +* Escreva mensagens a partir delas. |
| 165 | +* Então feche uma das abas. |
| 166 | + |
| 167 | +Isso levantará a exceção `WebSocketDisconnect`, e todos os outros clientes receberão uma mensagem como: |
| 168 | + |
| 169 | +``` |
| 170 | +Client #1596980209979 left the chat |
| 171 | +``` |
| 172 | + |
| 173 | +/// tip | Dica |
| 174 | + |
| 175 | +O app acima é um exemplo mínimo e simples para demonstrar como lidar e transmitir mensagens para várias conexões WebSocket. |
| 176 | + |
| 177 | +Mas tenha em mente que, como tudo é manipulado na memória, em uma única lista, ele só funcionará enquanto o processo estiver em execução e só funcionará com um único processo. |
| 178 | + |
| 179 | +Se você precisa de algo fácil de integrar com o FastAPI, mas que seja mais robusto, suportado por Redis, PostgreSQL ou outros, verifique o <a href="https://github.com/encode/broadcaster" class="external-link" target="_blank">encode/broadcaster</a>. |
| 180 | + |
| 181 | +/// |
| 182 | + |
| 183 | +## Mais informações |
| 184 | + |
| 185 | +Para aprender mais sobre as opções, verifique a documentação do Starlette para: |
| 186 | + |
| 187 | +* <a href="https://www.starlette.io/websockets/" class="external-link" target="_blank">A classe `WebSocket`</a>. |
| 188 | +* <a href="https://www.starlette.io/endpoints/#websocketendpoint" class="external-link" target="_blank">Manipulação de WebSockets baseada em classes</a>. |
0 commit comments