nicolas-arnaud
/
Transcendence
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fixed chat sockets listens redefined

master
nicolas-arnaud 2 years ago
parent
cf19f236ad
commit
8d333da7a5
5 changed files with 100 additions and 135 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      back/volume/src/chat/chat.gateway.ts
  2. 28
      front/volume/src/App.svelte
  3. 34
      front/volume/src/components/Channels.svelte
  4. 164
      front/volume/src/components/Chat.svelte
  5. 3
      front/volume/src/socket.ts

6
back/volume/src/chat/chat.gateway.ts
View File

@ -43,6 +43,12 @@ export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
async handleConnection (socket: Socket): Promise<void> {}
async handleDisconnect (socket: Socket): Promise<void> {
const connect = await this.connectedUserRepository.findOneBy({
socket: socket.id
})
if (connect)
await this.connectedUserRepository.delete({ socket: socket.id })
socket.disconnect()
console.log('socket %s has disconnected', socket.id)
}

28
front/volume/src/App.svelte
View File

@ -34,36 +34,10 @@
// Single Page Application config
let appState: string = APPSTATE.HOME;
async function updateChat() {
const urlSplit = appState.split("#", 2)
if (appState.includes(APPSTATE.CHANNELS) && urlSplit.length > 1) {
const currentChannelName = appState.split("#", 2)[1];
fetch(API_URL + "/channels", {
credentials: "include",
mode: "cors",
}).then((res) => {
res.json().then(async (channels) => {
await formatChannelNames(channels);
const channel = channels.find((c: ChannelsType) => c.name === currentChannelName);
selectedChannel = channel;
if (channel) {
chan.selectChat(channel.id); // disabled as it causes a bug where joining a channel happen twice
} else {
alert("Failed loading channel");
}
});
}).catch(() => {
alert("Failed loading channel");
});
}
}
history.replaceState({ appState: "" }, "", "/");
window.onpopstate = (e: PopStateEvent) => {
if (e.state) {
appState = e.state.appState;
void updateChat(); // why this?
}
};
@ -75,7 +49,6 @@
if (newState === appState) return;
appState = newState;
history.pushState({ appState }, "", appState);
void updateChat();
}
onMount(() => {
@ -169,6 +142,7 @@
}
let selectedChannel: ChannelsType;
const handleSelectChannel = (channel: ChannelsType) => {
selectedChannel = channel;
setAppState(APPSTATE.CHANNELS + "#" + channel.name);
};

34
front/volume/src/components/Channels.svelte
View File

@ -17,7 +17,6 @@
}
import { onMount } from "svelte";
import { API_URL, store } from "../Auth";
import { socket } from "../socket";
import type User from "./Profile.svelte";
export async function formatChannelNames(channel: Array<ChannelsType>): Promise<void> {
@ -76,25 +75,6 @@
return true;
}
const joinChannel = async (channel: ChannelsType) => {
console.log(channels)
socket.connect();
if (!channel.password) {
socket.emit("joinChannel", {
UserId: $store.ftId,
ChannelId: channel.id,
});
} else {
await show_popup("Channel is protected, enter password:")
socket.emit("joinChannel", {
UserId: $store.ftId,
ChannelId: channel.id,
pwd: $content,
});
}
console.log("Try to join channel: ", $store.ftId, channel.id, $content)
};
const getChannels = async () => {
const res = await fetch(API_URL + "/channels", {
credentials: "include",
@ -116,20 +96,6 @@
export let onSelectChannel: (channel: ChannelsType) => void;
let channel: ChannelsType;
export const selectChat = (id: number) => {
console.log("channel: ", id)
getChannels().then(() => {
channel = channels.find((c) => c.id === id);
if (channel) {
joinChannel(channel);
} else {
show_popup("Did not find channel", false)
}
})
};
const createChannel = async () => {
let name: string;

164
front/volume/src/components/Chat.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts" context="module">
import { createEventDispatcher, onDestroy, onMount } from "svelte";
import { store, API_URL } from "../Auth";
import { socket } from "../socket";
import { io, Socket } from "socket.io-client";
import { show_popup, content } from "./Alert/content";
import { APPSTATE } from "../App.svelte";
import type { ChannelsType, chatMessagesType } from "./Channels.svelte";
@ -17,11 +17,45 @@
let newText = "";
export let setAppState: (newState: APPSTATE | string) => void;
let socket: Socket;
onMount(async () => {
getMembers();
usersInterval = setInterval(async () => {
socket = io(
"http://" + (import.meta.env.VITE_HOST ?? "localhost") + ":3001"
);
socket.connect();
if (!channel) setAppState("/channels");
if (!channel.password) {
socket.emit("joinChannel", {
UserId: $store.ftId,
ChannelId: channel.id,
});
} else {
await show_popup("Channel is protected, enter password:");
socket.emit("joinChannel", {
UserId: $store.ftId,
ChannelId: channel.id,
pwd: $content,
});
}
socket.on("newMessage", (msg: chatMessagesType) => {
console.log(msg);
messages = [...messages, msg];
});
socket.on("messages", (msgs: Array<chatMessagesType>) => {
messages = msgs;
getMembers();
}, 1000);
usersInterval = setInterval(async () => {
getMembers();
}, 1000);
console.log("You are joining channel: ", channel.name);
});
socket.on("failedJoin", (error: string) => {
show_popup(`Failed to join channel: ${error}`, false);
setAppState(APPSTATE.CHANNELS);
});
console.log("Try to join channel: ", $store.ftId, channel.id, $content);
});
async function getMembers() {
@ -31,32 +65,15 @@
mode: "cors",
});
if (res.ok) blockedUsers = await res.json();
res = await fetch(`${API_URL}/channels/${channel.id}/users`, {
res = await fetch(`${API_URL}/channels/${channel.id}/users`, {
credentials: "include",
mode: "cors"
})
mode: "cors",
});
if (res.ok) chatMembers = await res.json();
}
socket.on("newMessage", (msg: chatMessagesType) => {
console.log(msg)
messages = [...messages, msg];
});
socket.on("messages", (msgs: Array<chatMessagesType>) => {
messages = msgs;
console.log("You are joining channel: ", channel.name)
});
socket.on("failedJoin", (error: string) => {
show_popup(`Failed to join channel: ${error}`, false)
setAppState("/channels")
});
onDestroy(() => {
clearInterval(usersInterval)
clearInterval(usersInterval);
socket.disconnect();
});
@ -119,9 +136,8 @@
body: JSON.stringify({ id: target.ftId }),
});
}
if (response.ok)
await show_popup("User blocked", false);
else await show_popup("Failed to block user",false);
if (response.ok) await show_popup("User blocked", false);
else await show_popup("Failed to block user", false);
};
//--------------------------------------------------------------------------------/
@ -156,8 +172,10 @@
});
if (response.ok) {
const target = await response.json();
await show_popup("Enter a time for which the user will be banned from this channel")
const duration = $content
await show_popup(
"Enter a time for which the user will be banned from this channel"
);
const duration = $content;
response = await fetch(API_URL + "/channels/" + channel.id + "/ban", {
credentials: "include",
method: "POST",
@ -165,9 +183,9 @@
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ data: [target.ftId, duration]}),
body: JSON.stringify({ data: [target.ftId, duration] }),
});
socket.emit("kickUser", channel.id, $store.ftId, target.ftId)
socket.emit("kickUser", channel.id, $store.ftId, target.ftId);
dispatch("return-home");
}
};
@ -191,8 +209,8 @@
body: JSON.stringify({ id: target.ftId }),
});
}
if (response.ok) await show_popup("User unbanned",false);
else await show_popup("Failed to unban user",false);
if (response.ok) await show_popup("User unbanned", false);
else await show_popup("Failed to unban user", false);
};
//--------------------------------------------------------------------------------/
@ -204,9 +222,15 @@
});
if (response.ok) {
const target = await response.json();
socket.emit("kickUser", {chan : channel.id, from : $store.ftId, to: target.ftId});
socket.emit("kickUser", {
chan: channel.id,
from: $store.ftId,
to: target.ftId,
});
dispatch("return-home");
} else {await show_popup("merde",false)}
} else {
await show_popup("merde", false);
}
};
//--------------------------------------------------------------------------------/
@ -219,7 +243,7 @@
});
const target = await response.json();
if (response.ok) {
response = await fetch(API_URL + "/channels/" + channel.id + "/mute", {
response = await fetch(API_URL + "/channels/" + channel.id + "/mute", {
credentials: "include",
method: "POST",
mode: "cors",
@ -229,8 +253,8 @@
body: JSON.stringify({ data: [target.ftId, +prompt] }),
});
}
if (response.ok) await show_popup("User muted",false);
else await show_popup("Failed to mute user",false);
if (response.ok) await show_popup("User muted", false);
else await show_popup("Failed to mute user", false);
};
//--------------------------------------------------------------------------------/
@ -253,9 +277,9 @@
});
}
if (response.ok) {
await show_popup("User admined",false);
await show_popup("User admined", false);
} else {
await show_popup("Failed to admin user",false);
await show_popup("Failed to admin user", false);
}
};
@ -288,14 +312,13 @@
//--------------------------------------------------------------------------------/
const leaveChannel = async () => {
await show_popup("Press \"Okay\" to leave this channel?", false);
if ($content == 'ok') {
await show_popup('Press "Okay" to leave this channel?', false);
if ($content == "ok") {
socket.emit("leaveChannel");
dispatch("return-home");
socket.disconnect()
socket.disconnect();
}
}
};
function onSendMessage() {
dispatch("send-message", selectedUser);
showProfileMenu = false;
@ -328,9 +351,7 @@
>
<ul>
<li>
<button on:click={onSendMessage}>
Send Message
</button>
<button on:click={onSendMessage}> Send Message </button>
</li>
<li>
<button on:click={() => dispatch("view-profile", selectedUser)}>
@ -363,26 +384,23 @@
</div>
{/if}
<form on:submit|preventDefault={sendMessage}>
<input type="text" placeholder="Type a message..." bind:value={newText} />
<button style="background:#dedede; margin:auto" >
<img src="img/send.png" alt="send" />
<input type="text" placeholder="Type a message..." bind:value={newText} />
<button style="background:#dedede; margin:auto">
<img src="img/send.png" alt="send" />
</button>
</form>
<div>
<button on:click={leaveChannel}>Leave</button>
<button
on:click|stopPropagation={toggleChatMembers}
on:keydown|stopPropagation
>
Chat Members
</button>
</div>
<button on:click={leaveChannel}>Leave</button>
<button
on:click|stopPropagation={toggleChatMembers}
on:keydown|stopPropagation
>
Chat Members
</button>
</div>
{#if showChatMembers}
<div
on:click|stopPropagation
on:keydown|stopPropagation
/>
<div on:click|stopPropagation on:keydown|stopPropagation />
<ul>
{#each chatMembers as member}
<li>
@ -391,8 +409,12 @@
<button on:click={() => banUser(member.username)}> ban </button>
<button on:click={() => kickUser(member.username)}> kick </button>
<button on:click={() => muteUser(member.username)}> mute </button>
<button on:click={() => adminUser(member.username)}> promote </button>
<button on:click={() => removeAdminUser(member.username)}> demote </button>
<button on:click={() => adminUser(member.username)}>
promote
</button>
<button on:click={() => removeAdminUser(member.username)}>
demote
</button>
</p>
</li>
{/each}
@ -413,13 +435,13 @@
justify-content: center;
align-items: center;
}
.chat {
background-color: #343a40;
border: 1px solid #dedede;
border-radius: 5px;
padding: 1rem;
max-width: 90%;
max-width: 90%;
width: auto;
margin: auto;
display: flex;
@ -427,8 +449,8 @@
}
.messages {
height : 400px;
width : 100%;
height: 400px;
width: 100%;
overflow-y: scroll;
border-bottom: 1px solid #dedede;
padding-bottom: 1rem;
@ -440,7 +462,7 @@
width: auto;
line-height: 1.4;
margin-bottom: 0.5rem;
word-wrap:break-word;
word-wrap: break-word;
}
.message-name {

3
front/volume/src/socket.ts
View File

@ -1,3 +0,0 @@
import { io, Socket } from "socket.io-client";
export const socket: Socket = io("http://" + (import.meta.env.VITE_HOST ?? 'localhost') + ":3001");
Write Preview
Loading…
Cancel
Save