Witam wszystkich!
Chcę zrobić stronę internetową na któej sa 4 przyciski (lewo, gora, dol, prawo),
a takze inną stronę na której bedzie wyświetlało to co malujesz (może używając canvas) sterując przyciskami z innej strony.
Chciałbym się zapytać jak ja mogę to zrobić, jak stworzyć web-serwer i inne szczegóły.
Z góry dziękuję!
a takze inną stronę na której bedzie wyświetlało to co malujesz (może używając canvas) sterując przyciskami z innej strony.
jeśli chodzi o częśc sieciową, to wrzucasz opis tego, co rysujesz do obiektu np.
const command = {
type: 'rect', x: 100, y: 20, width: 30, height: 30
}
i przesyłasz to za pomocą WebSockets na serwer, który później powiadamia drugi komputer, że taka i taka komenda jest.
więc drugi komputer musi przetłumaczyć sobie tę komendę na odpowiednie wywołania canvasa (tutaj jest jeszcze kwestia samego API canvasa do rysowania https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API ).
Do WebSockets można użyć biblioteki socket.io
https://socket.io/
No i też wchodzi zagadnienie zabezpieczeń. Czy chcesz, żeby każdy kto wejdzie na stronę, mógł rysować? Czy trzeba się będzie dokonać jakiejś autoryzacji?
Autoryzacji bym chciał.
I jak zrobić serwera, może jakich technologii użyć czy coś?
gg ggg napisał(a):
Chcę zrobić stronę internetową na któej sa 4 przyciski (lewo, gora, dol, prawo),
a takze inną stronę na której bedzie wyświetlało to co malujesz (może używając canvas) sterując przyciskami z innej strony.
A co na prawdę próbujesz zrobić? Chcesz stworzyć jakiegoś rodzaju grę przeglądarkową?
Riddle napisał(a):
A co na prawdę próbujesz zrobić? Chcesz stworzyć jakiegoś rodzaju grę przeglądarkową?
Chcę zrobic stronę na której będzie wyświetlalo w canvasie to, co maluję na innej stronie (klikając na przyciski lewo, gora...). Czyli kiedy klikam np. na przycisk "Prawo" to na innej stronie, gdzie jest canvas, namaluje się o 1 kwadraciik w prawo,
Tym chcę nauczyć się używać websockets i jak działa serwer jak wysyła komenty itd.
Jeśli chcesz się "nauczyć" websocketów to postawiłeś sobie trudne zadanie.
Dużo prościej byłoby napisać aplikację która jest mniej interaktywna; np. możesz zrobić stronę która aktualizuję wyświetlaną godzinę po websocketa z servera - to jest znacznie prostsze do zrobienia i ma większą szansę że Ci się uda.
Spróbuj coś takiego:
import asyncio
from datetime import datetime
import websockets
async def time_server(websocket):
while True:
await websocket.send(datetime.now().strftime('%Y-%m-%d %H:%M:%S'))
await asyncio.sleep(1)
async def main():
async with websockets.serve(time_server, 'localhost', 8084):
await asyncio.Future()
if __name__ == "__main__":
asyncio.run(main())
<!DOCTYPE html>
<html lang="en">
<body>
<h1>
Server Time:
<span id="server-time">Loading...</span>
</h1>
<script>
const socket = new WebSocket("ws://localhost:8084");
socket.onmessage = message => document.getElementById("server-time").innerText = message.data;
socket.onerror = error => console.error(error);
socket.onopen = () => console.log("Connected.");
socket.onclose = () => console.log("Disconnected.");
</script>
</body>
</html>
czyli żeby włączyć serwer, to po prostu trzeba otworzyc python plik?
działa!)
A jeśli chce przyjmować jakies komenty z innej strony np. ze jest nacisnięty przycik, To niech będzie że pokazuje się czas, a potem kiedy znowu klikam na przycisk to "loading"
Jak mogę to stworzyć?
Dziękuję za pomoc!
gg ggg napisał(a):
A jeśli chce przyjmować jakies komenty z innej strony np. ze jest nacisnięty przycik, To niech będzie że pokazuje się czas, a potem kiedy znowu klikam na przycisk to "loading"
Jak mogę to stworzyć?
No musisz wysłać wiadomość w drugą stronę, tym razem od klienta (przeglądarka) do serwera:
<!DOCTYPE html>
<html lang="en">
<body>
<button id="commandButton">
Send command
</button>
<script>
const socket = new WebSocket('ws://localhost:8084');
socket.onopen = () => console.log("Connected.");
socket.onclose = () => console.log("Disconnected.");
document.getElementById('commandButton')
.addEventListener('click', () => socket.send('My command'));
</script>
</body>
</html>
import asyncio
import websockets
async def handle_connection(websocket):
async for message in websocket:
print(f"Received command: {message}")
async def main():
async with websockets.serve(handle_connection, "localhost", 8084):
print("Listening for commands...")
await asyncio.Future()
if __name__ == "__main__":
asyncio.run(main())