wip tests of socket
This commit is contained in:
lenovo
34
README.md
34
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
|
||||
- [ ]
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -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}
|
||||
3587
srcs/requirements/svelte/api_front/public/build/bundle.js
Normal file
3587
srcs/requirements/svelte/api_front/public/build/bundle.js
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -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 |
|
||||
|________||_________|
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -18,4 +18,3 @@ const build_new_message = (message) => {
|
||||
return p;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
|
||||
|
||||
const submit_new_message = () => {
|
||||
const div_msg = document.getElementById('msg_write');
|
||||
/*
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -21,3 +21,4 @@ export class ChatGateway {
|
||||
this.server.emit('message', message);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,13 @@
|
||||
https://www.youtube.com/watch?v=o8Fn9BgqoQM
|
||||
|
||||
npm install --save express
|
||||
npm install --save socket.io
|
||||
sudo npm install -g nodemon
|
||||
first time :
|
||||
npm install --save express
|
||||
npm install --save socket.io
|
||||
sudo npm install -g nodemon
|
||||
|
||||
next time :
|
||||
npm install
|
||||
|
||||
anytime :
|
||||
nodemon server
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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) {
|
||||
console.log("req.headers: ");
|
||||
console.log(req.headers);
|
||||
res.sendFile(__dirname + '/index.html');
|
||||
})
|
||||
//app.get("/", function (req, res) {
|
||||
// console.log("req.headers: ");
|
||||
// console.log(req.headers);
|
||||
// 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');
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user