websocket

aratama · Oct 20, 2024 · 72a3224 · 72a3224
1 parent 3088cdb
commit 72a3224
Show file tree

Hide file tree

Showing 17 changed files with 209 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 /target
-/dist
+/dist
+.stage
diff --git a/Cargo.toml b/Cargo.toml
@@ -60,7 +60,14 @@ features = [
 
 [dependencies.web-sys]
 version = "0.3.70"
-features = ["console", "Window", "Storage"]
+features = [
+    "console",
+    "Window",
+    "Storage",
+    "WebSocket",
+    "MessageEvent",
+    "ErrorEvent",
+]
 
 [dependencies.bevy_rapier2d]
 version = "0.27.0"

diff --git a/docs/index.html b/docs/index.html
@@ -1,8 +1,8 @@
-<script integrity=sha384-DXfxbHnmRjXl3uhZSP4S1IWEe3DfX/sHDa2A7iHxmUB6Ag+87PaP8wV2AtDOwHfm src=./restart-audio-context-8127143435824044.js type=module></script><link href=./index-56627a79e0752a1c.css integrity=sha384-m/ivHNojsD/VAvwMMce+fhrN8VxOZuZt5hms1JExuO36KLCDKKRGDtjLXSlnQq0B rel=stylesheet><script nonce="CuZ6N6gVlCtFaHRLASTYew==" type=module>import init, * as bindings from './my_bevy_game-ba276c861f566071.js';
-const wasm = await init('./my_bevy_game-ba276c861f566071_bg.wasm');
+<script integrity=sha384-DXfxbHnmRjXl3uhZSP4S1IWEe3DfX/sHDa2A7iHxmUB6Ag+87PaP8wV2AtDOwHfm src=./restart-audio-context-8127143435824044.js type=module></script><link href=./index-56627a79e0752a1c.css integrity=sha384-m/ivHNojsD/VAvwMMce+fhrN8VxOZuZt5hms1JExuO36KLCDKKRGDtjLXSlnQq0B rel=stylesheet><script nonce="iGEe4s3oX1SQSqG3f7F0nQ==" type=module>import init, * as bindings from './my_bevy_game-a8b691d97a29bb5e.js';
+const wasm = await init('./my_bevy_game-a8b691d97a29bb5e_bg.wasm');
 
 
 window.wasmBindings = bindings;
 
 
-dispatchEvent(new CustomEvent("TrunkApplicationStarted", {detail: {wasm}}));</script><title></title><link crossorigin href=./my_bevy_game-ba276c861f566071.js integrity=sha384-V4s1vj0yqE1RFPdVDehr2zhrSjFVg8hUJ+/dMr5hrAOQeCZF2g5g7JpZIG1d5ckp rel=modulepreload><link as=fetch crossorigin href=./my_bevy_game-ba276c861f566071_bg.wasm integrity=sha384-nquPGE8gC/WOGOLHBODKfj+MdmYdAN3BHUDHFPMUcd50rWPXVOyiluRjJ6lU+nBJ rel=preload type=application/wasm></head><body></body></html>
+dispatchEvent(new CustomEvent("TrunkApplicationStarted", {detail: {wasm}}));</script><title>Magna Magia 0.1</title><link crossorigin href=./my_bevy_game-a8b691d97a29bb5e.js integrity=sha384-c7UPANyLeFBIKQkwGc9pZehIG28gfpnf9kE/Vdr683uKhr02PXwqPFYoO3SF24xp rel=modulepreload><link as=fetch crossorigin href=./my_bevy_game-a8b691d97a29bb5e_bg.wasm integrity=sha384-j0pisGGUlc2Jc0DvW9XqVuF2CKm1ecxJ3nEL5wBOPpjKkdbeoviN3QE5FQurmU2i rel=preload type=application/wasm></head><body></body></html>
diff --git a/docs/my_bevy_game-a8b691d97a29bb5e.js b/docs/my_bevy_game-a8b691d97a29bb5e.js
diff --git a/docs/my_bevy_game-ba276c861f566071_bg.wasm → docs/my_bevy_game-a8b691d97a29bb5e_bg.wasm b/docs/my_bevy_game-ba276c861f566071_bg.wasm → docs/my_bevy_game-a8b691d97a29bb5e_bg.wasm
diff --git a/docs/my_bevy_game-ba276c861f566071.js b/docs/my_bevy_game-ba276c861f566071.js
diff --git a/index.html b/index.html
@@ -9,11 +9,14 @@
     <link data-trunk rel="css" href="index.css" />
     <link data-trunk rel="copy-dir" href="assets" />
     <link data-trunk rel="rust" data-wasm-opt="z" />
+    <!-- <link data-trunk rel="rust" data-wasm-opt="0" /> -->
+    <!-- <link data-trunk rel="rust" data-keep-debug /> -->
+
 
     <!-- ChromeのC/C++ DevTools Supportでデバッグをしたいときは、デバッグ情報を残すために以下のオプションを有効にする -->
     <!-- ただしWSLで開発している場合は、WindowsがわのChromeはWSL内のソースファイルを参照できないのでうまくいかない -->
     <!-- <link data-trunk rel="rust" data-wasm-opt="0" data-keep-debug /> -->
-    <title></title>
+    <title>Magna Magia 0.1</title>
 </head>
 
 <body></body>

diff --git a/server/.gitignore b/server/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/server/index.js b/server/index.js
@@ -0,0 +1,29 @@
+const WebSocket = require('ws');
+const port = process.env.PORT || 3000;
+const server = new WebSocket.Server({ port });
+console.log(`Server started on port ${port}`);
+
+// https://www.npmjs.com/package/ws
+server.on('connection', (ws, req) => {
+
+  const ip = req.socket.remoteAddress;
+
+  console.log('Client connected, ip address:', ip);
+
+  ws.on('error', (e) => { 
+    console.error(e); 
+  });
+
+  ws.on('message', (message, isBinary) => {
+    console.log('received: %s', message);
+
+    const data = message.toString().toUpperCase();
+    // ws.send(`Hello, you sent -> ${message.toString().toUpperCase()}`);
+
+    server.clients.forEach(function each(client) {
+      if (client.readyState === WebSocket.OPEN) {
+        client.send(data, { binary: isBinary });
+      }
+    });
+  });
+});
diff --git a/server/package-lock.json b/server/package-lock.json
diff --git a/server/package.json b/server/package.json
@@ -0,0 +1,16 @@
+{
+    "name": "whiteboard",
+    "version": "1.0.0",
+    "description": "A simple collaborative whiteboard using socket.io",
+    "main": "index.js",
+    "keywords": [],
+    "dependencies": {
+        "ws": "^8.18.0"
+    },
+    "scripts": {
+        "start": "node index",
+        "deploy": "gcloud run deploy magia-server --project=magia --source ."
+    },
+    "author": "Damien Arrachequesne",
+    "license": "MIT"
+}
diff --git a/server/public/index.html b/server/public/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Socket.IO</title>
+</head>
+<body>
+  <script src="https://cdn.socket.io/4.7.5/socket.io.min.js" integrity="sha384-2huaZvOR9iDzHqslqwpR87isEmrfxqyWOF7hr7BY6KG0+hVKLoEXMPUJw3ynWuhO" crossorigin="anonymous"></script>
+  <script src="./main.js"></script>
+</body>
+</html>
diff --git a/server/public/main.js b/server/public/main.js
@@ -0,0 +1,17 @@
+'use strict';
+
+(function() {
+    const socket = new WebSocket("ws://localhost:3000");
+
+    socket.onopen = () => {
+        console.log('Connected to server');
+
+        socket.send('Hello from client');
+    };
+
+    socket.onmessage = (event) => {
+        console.log('Message from server', event.data);
+
+        socket.send(event.data.toUppserCase());
+    };
+})();
diff --git a/server/readme.md b/server/readme.md
@@ -0,0 +1,18 @@
+https://github.com/socketio/socket.io/tree/master/examples/whiteboard
+
+# Socket.IO Collaborative Whiteboard
+
+A simple collaborative whiteboard for Socket.IO
+
+## How to use
+
+```
+$ npm ci && npm start
+```
+
+And point your browser to `http://localhost:3000`. Optionally, specify
+a port by supplying the `PORT` env variable.
+
+## Features
+
+- draw on the whiteboard and all other users will see you drawings live
diff --git a/src/game.rs b/src/game.rs
@@ -20,4 +20,5 @@ mod set;
 mod states;
 mod tile;
 mod wall;
+mod websocket;
 mod world;
diff --git a/src/game/game.rs b/src/game/game.rs
@@ -15,6 +15,8 @@ use super::overlay::*;
 use super::player::*;
 use super::serialize::*;
 use super::states::*;
+#[cfg(target_arch = "wasm32")]
+use super::websocket::send_to_server;
 use super::world::*;
 use bevy::asset::{AssetMetaCheck, AssetPlugin};
 #[cfg(feature = "debug")]
@@ -37,7 +39,21 @@ use bevy_rapier2d::prelude::*;
 #[cfg(feature = "debug")]
 use iyes_perf_ui::PerfUiPlugin;
 
+#[cfg(target_arch = "wasm32")]
+use web_sys::console;
+
+#[cfg(target_arch = "wasm32")]
+use wasm_bindgen::JsValue;
+
 pub fn run_game() {
+    #[cfg(target_arch = "wasm32")]
+    if let Err(err) = send_to_server() {
+        console::log_1(&JsValue::from_str("Failed to send message to server"));
+        // console::log_1(
+        //     &JsValue::from_str(&err.as_string().unwrap_or("".to_string())),
+        // );
+    }
+
     let mut app = App::new();
 
     app
@@ -59,7 +75,7 @@ pub fn run_game() {
                             icon: CursorIcon::Crosshair,
                             ..default()
                         },
-                        title: "Magia Gene 0.1".to_string(),
+                        title: "Magna Magia 0.1".to_string(),
                         resizable: false,
                         enabled_buttons: EnabledButtons {
                             close: true,

diff --git a/src/game/websocket.rs b/src/game/websocket.rs
@@ -0,0 +1,44 @@
+#![cfg(target_arch = "wasm32")]
+
+use wasm_bindgen::prelude::*;
+use wasm_bindgen::{prelude::Closure, JsValue};
+use web_sys::{console, ErrorEvent, MessageEvent, WebSocket};
+
+// https://rustwasm.github.io/wasm-bindgen/examples/websockets.html
+pub fn send_to_server() -> Result<(), JsValue> {
+    let url = "http://127.0.0.1:3000";
+
+    console::log_2(&JsValue::from_str("connecting "), &JsValue::from_str(url));
+
+    let ws = WebSocket::new(url)?;
+    let cloned_ws = ws.clone();
+
+    console::log_1(&JsValue::from_str("socket created "));
+
+    let onmessage_callback = Closure::wrap(Box::new(move |e: MessageEvent| {
+        console::log_2(&JsValue::from_str("message event"), &e.data());
+    }) as Box<dyn FnMut(MessageEvent)>);
+    ws.set_onmessage(Some(onmessage_callback.as_ref().unchecked_ref()));
+    onmessage_callback.forget();
+
+    let onerror_callback = Closure::wrap(Box::new(move |e: ErrorEvent| {
+        console::log_2(
+            &JsValue::from_str("error event"),
+            &JsValue::from_str(e.message().as_str()),
+        );
+    }) as Box<dyn FnMut(ErrorEvent)>);
+    ws.set_onerror(Some(onerror_callback.as_ref().unchecked_ref()));
+    onerror_callback.forget();
+
+    let onopen_callback = Closure::wrap(Box::new(move |_| {
+        console::log_1(&JsValue::from_str("socket opended"));
+
+        cloned_ws.send_with_str("hello from rust");
+    }) as Box<dyn FnMut(JsValue)>);
+    ws.set_onopen(Some(onopen_callback.as_ref().unchecked_ref()));
+    onopen_callback.forget();
+
+    console::log_1(&JsValue::from_str("callback initialized "));
+
+    Ok(())
+}
-Original file line number
+Diff line change
@@ -1,2 +1,3 @@
     /target
-    /dist
+    /dist
+    .stage