wip tests of socket

README.md

@@ -1,36 +1,6 @@
+### hugo chat :
 
-## questions :
+- [ ] 
-
-- choose a secondary browser
-- choose solution to rootless mode (VM, rebuild, unique root uid)
-- choose 2fa method : texto ? Google Authentication ?
-- when chat-room owner leaves what happens ?
-- can chat-room administrators ban and mute other administrators ?
-- game technologie (canvas ?)
-
----
-
-## tasks :
-
-#### luke
-
-- getting started with Javascript
-- getting started with Node.js/Nest.js
-- pong game solo front-end (canvas ? js ?)
-- add multiplayers to Pong with Node.js (without database, accounts, ...)
-
-#### eric
-
-- getting started with Javascript
-- getting started with framework TypeScript front-end (Svelte ?)
-- single-page démo, sans back-end
-- chat front-end ? (tester avec des messages random locaux)
-
-#### hugo
-
-- getting started with Javascript
-- getting started with Node.js/Nest.js
-- getting started with PostgreSQL
 
 ---
 

srcs/requirements/svelte/api_front/public/build/bundle.css

@@ -0,0 +1,4 @@
+.grid-container.svelte-16gr88w.svelte-16gr88w{position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;margin-bottom:0px;overflow:hidden;padding:20px 40px;display:grid;grid-template-columns:repeat(12, 1fr);grid-template-rows:1fr 1fr 1fr 1fr 1fr;align-items:center}header.svelte-16gr88w h1.svelte-16gr88w,header.svelte-16gr88w nav a.svelte-16gr88w{color:bisque}header.svelte-16gr88w h1.svelte-16gr88w{grid-column:1 / 7;grid-row:1;padding:20px;border:1px solid bisque}header.svelte-16gr88w nav.svelte-16gr88w{grid-column:7 / 13;grid-row:1;justify-self:end;padding:20px;border:1px solid bisque}header.svelte-16gr88w nav a.svelte-16gr88w{margin-left:10px;text-decoration:none}header.svelte-16gr88w nav a.svelte-16gr88w:hover{font-weight:bold;background-color:blue}header.svelte-16gr88w h2.svelte-16gr88w:hover{background:blue}header.svelte-16gr88w h2.svelte-16gr88w{grid-row:3;grid-column:5 / span 4;justify-self:center;border:1px solid black;z-index:3}header.svelte-16gr88w h2 div.svelte-16gr88w{font-size:2em}nav.svelte-16gr88w div.svelte-16gr88w{display:inline;color:bisque;font-weight:bold}@font-face{font-family:'Bondi';src:url('/fonts/Bondi.ttf.woff') format('woff'),
+        url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
+        url('/fonts/Bondi.ttf.eot'),
+        url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');font-weight:normal;font-style:normal}header.svelte-1rtggu1.svelte-1rtggu1{background:#618174;margin:0}header.svelte-1rtggu1.svelte-1rtggu1{position:sticky;display:grid;grid-template-columns:1fr 1fr 1fr}h1.svelte-1rtggu1.svelte-1rtggu1{font-family:'Bondi'}h1.svelte-1rtggu1.svelte-1rtggu1{margin:0;text-align:left;display:flex;justify-self:center;align-self:center}img.svelte-1rtggu1.svelte-1rtggu1{cursor:pointer;max-width:40px;padding:7px 20px;justify-self:left}nav.svelte-1rtggu1.svelte-1rtggu1{display:flex;justify-content:right}nav.svelte-1rtggu1 button.svelte-1rtggu1{margin:7px 20px;border-radius:4px}footer.svelte-3gs9wc{padding:40px;padding-bottom:10px;text-align:center}.copyright.svelte-3gs9wc{color:#aaa;font-size:14px;display:inline-block;padding:20px;border-top:1px solid #ddd}canvas.svelte-1bstsd0{width:100%;height:100%;background-color:#666}main.svelte-clru56.svelte-clru56{max-width:960px;margin:40px auto;text-align:center}.icon.svelte-clru56.svelte-clru56{max-width:150px}section.main-stats.svelte-clru56.svelte-clru56{max-width:600px;margin:40px auto;text-align:center;display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(3, 1fr)}section.main-stats.svelte-clru56 h4.svelte-clru56{grid-column:1 / span 3}body.svelte-yg7664{display:flex;align-items:center;padding-top:40px;padding-bottom:40px}.form-signin.svelte-yg7664{max-width:330px;padding:15px}body.svelte-7yuo9g{min-height:100vh;min-height:-webkit-fill-available}main.svelte-7yuo9g{height:100vh;height:-webkit-fill-available;max-height:100vh;overflow-x:auto;overflow-y:hidden}body.svelte-yg7664{display:flex;align-items:center;padding-top:40px;padding-bottom:40px}.form-signin.svelte-yg7664{max-width:330px;padding:15px}body.svelte-18vhlfs{display:flex;align-items:center;padding-top:40px;padding-bottom:40px}.form-signin.svelte-18vhlfs{max-width:330px;padding:15px}body.svelte-hhiwhq{display:flex;align-items:center;padding-top:40px;padding-bottom:40px}.form-signin.svelte-hhiwhq{max-width:330px;padding:15px}

tests_hugo/chat_nest/README.md

@@ -1,5 +1,6 @@
 https://www.youtube.com/watch?v=7xpLYk4q0Sg
 
+npm install (to install packages)
 npm run start:dev
 
 
@@ -13,54 +14,3 @@ npm run start:dev
 - [ ] send game invitation in chat
 - [ ] view user profiles from chat
 
-```
- ________________________
-| .A                     |
-|  xxxxxxxx              |
-|                     B. |
-|             xxxxxxxxx  |
-|                xxxxxx  |
-| .A                     |
-|  xxxxx                 |
-| .C                     |
-|  xxxxxxxxxx            |
-|  xxxxxxx               |
-|____ ____ ____ ____ ____|
-|____|____|____|____|_ __|
-|_____________________|__|
-
----
- ___________
-|           |
-| chat room |
-|___________|
-
----
-
- _________________________________________
-|                                         |
-| _____________________________           |
-|| people name 3           : | |          |
-||___________________________|||          |
-||                           |||          |
-|| room name 2             : |||          |
-||___________________________| |          |
-||                           | |          |
-|| people name 4           : | |          |
-||___________________________| |          |
-||_____________ _____________|_|          |
-||             |               |          |
-|| create chat | join new chat |          |
-||_____________|_______________|          |
-|_________________________________________|
-|                                         |
-|_________________________________________|
-
----
- ________  _________
-|        ||         |
-| public || private |
-|________||_________|
-
-```
-

tests_hugo/chat_nest/chat_client/chat.html

@@ -45,6 +45,9 @@
 		<script src="https://cdn.socket.io/4.5.3/socket.io.min.js" integrity="sha384-WPFUvHkB1aHA5TDSZi6xtDgkF0wXJcIIxXhC6h8OT8EH3fC5PWro5pWJ1THjcfEi" crossorigin="anonymous"></script>
 		<script>
 			const socket = io("http://localhost:3000");
+			socket.on("connect", () => {
+				console.log("client: connection");
+			});
 		</script>
 
 		<script src="./chat_submit_msg.js"></script>

tests_hugo/chat_nest/chat_client/chat_receive_msg.js

@@ -18,4 +18,3 @@ const build_new_message = (message) => {
 	return p;
 }
 
-

tests_hugo/chat_nest/chat_client/chat_submit_msg.js

@@ -1,5 +1,4 @@
 
-
 const submit_new_message = () => {
 	const div_msg = document.getElementById('msg_write');
 	/*

tests_hugo/chat_nest/chat_server/src/chat.gateway.ts

@@ -21,3 +21,4 @@ export class ChatGateway {
 		this.server.emit('message', message);
 	}
 }
+

tests_hugo/chat_node/README.md

@@ -1,6 +1,13 @@
 https://www.youtube.com/watch?v=o8Fn9BgqoQM
 
-npm install --save express
+first time :
-npm install --save socket.io
+	npm install --save express
-sudo npm install -g nodemon
+	npm install --save socket.io
+	sudo npm install -g nodemon
+
+next time :
+	npm install
+
+anytime :
+	nodemon server
 

tests_hugo/chat_node/index.html

@@ -6,6 +6,50 @@
 	</head>
 
 	<body>
+
+		<input type="checkbox" id="chat_input" style="display: none;"/>
+
+		<div class="chat_box">
+
+			<div class="chat_item controls_area">
+			</div>
+
+			<label class="chat_item open_close button" for="chat_input">
+				<p>chat</p>
+			</label>
+
+			<div class="chat_item msg_thread">
+				<div class="msg_box" id="msg_thread">
+				</div>
+			</div>
+
+			<div class="chat_item msg_write">
+				<div class="text_area" id="msg_write" contenteditable>
+				</div>
+			</div>
+
+			<button class="chat_item msg_send button" onclick="submit_new_message()">
+				<p>send</p>
+			</button>
+
+		</div>
+
+
+		<!-- https://socket.io/docs/v4/client-installation/ -->
+		<!-- https://socket.io/docs/v4/client-api/ -->
+		<script src="https://cdn.socket.io/4.5.3/socket.io.min.js" integrity="sha384-WPFUvHkB1aHA5TDSZi6xtDgkF0wXJcIIxXhC6h8OT8EH3fC5PWro5pWJ1THjcfEi" crossorigin="anonymous"></script>
+		<script>
+			const socket = io("http://localhost:3000");
+			socket.on("connect", () => {
+				console.log("client: connection");
+			});
+		</script>
+
+		<script src="./chat_submit_msg.js"></script>
+		<script src="./chat_receive_msg.js"></script>
+
+
+<!--
 		<script src="/socket.io/socket.io.js"></script>
 		<script>
 
@@ -30,5 +74,6 @@
 			<input id="message" type="text"/>
 			<button onclick="send()">send</button>
 		</div>
+-->
 	</body>
 </html>

tests_hugo/chat_node/server.js

@@ -1,12 +1,12 @@
-let app = require('express')();
+//let app = require('express')();
 let http = require('http').Server(app);
 let io = require('socket.io')(http);
 
-app.get("/", function (req, res) {
+//app.get("/", function (req, res) {
-	console.log("req.headers: ");
+//	console.log("req.headers: ");
-	console.log(req.headers);
+//	console.log(req.headers);
-	res.sendFile(__dirname + '/index.html');
+//	res.sendFile(__dirname + '/index.html');
-})
+//})
 
 io.on('connection', function (socket) {
 
@@ -26,3 +26,4 @@ io.on('connection', function (socket) {
 http.listen(3000, function () {
 	console.log('server running on 3000');
 })
+