michel/ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chat functional

Browse Source
This commit is contained in:
Xamora
2023-12-15 20:32:43 +01:00
parent 7e2c29e78b
commit bcb072f7d9
16 changed files with 456 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/static/js/api/chat/channel.js
View File

@ -1,9 +1,77 @@
import {Message} from "./message.js"
class Channel {
constructor(id, members, messages) {
this.id = id;
this.members = members;
this.messages = messages;
constructor(client, channel_id, members_id, messages, reload) {
this.client = client;
this.channel_id = channel_id;
this.members_id = members_id;
this.messages = [];
if (messages != undefined)
this.updateMessages(messages);
this.connect(reload);
}
// reload = function to use when we receive a message
async connect(reload) {
let url = `ws://${window.location.host}/ws/chat/${this.channel_id}/`;
this.chatSocket = new WebSocket(url);
this.chatSocket.onmessage = (event) =>{
let data = JSON.parse(event.data)
this.messages.push(new Message(
this.channel_id,
data.author_id,
data.content,
data.time,
));
reload();
};
}
async disconnect() {
this.chatSocket.close();
}
updateMessages(messages) {
messages = JSON.parse(messages);
let new_messages = [];
messages.forEach((message) => {
message = message["fields"];
new_messages.push(new Message(
message["channel_id"],
message["author_id"],
message["content"],
message["time"],
));
});
//console.log(new_messages);
this.messages = new_messages;
return new_messages;
}
async sendMessageChannel(message) {
if (this.chatSocket == undefined)
return;
this.chatSocket.send(JSON.stringify({
'message':message
}));
}
async deleteChannel() {
let response = await this.client._delete("/api/chat/" + this.channel_id, {
});
let data = await response.json();
return data;
}
}
export {Channel}

26
frontend/static/js/api/chat/channels.js
View File

@ -1,19 +1,37 @@
import {Channel} from "./channel.js"
import {Message} from "./message.js"
class Channels {
constructor(client) {
this.client = client;
}
async createChannel(users_id) {
console.log(users_id);
async createChannel(users_id, reload) {
let response = await this.client._post("/api/chat/", {
users_id:users_id
});
let data = await response.json();
if (data == "Channel already exist")
return null;
let exit_code = await response.status;
if (exit_code >= 300)
return undefined;
let messages = undefined;
if (exit_code == 200)
messages = data.messages;
return new Channel(this.client, data.channel_id, users_id, messages, reload);
}
async deleteChannel(users_id) {
let response = await this.client._delete("/api/chat/", {
users_id:users_id
});
let data = await response.json();
console.log(response.status)
return data;
}
}
export {Channels}

10
frontend/static/js/api/chat/message.js Normal file
View File

@ -0,0 +1,10 @@
class Message {
constructor(channel_id, author_id, content, time) {
this.channel_id = channel_id;
this.author_id = author_id;
this.content = content;
this.time = time;
}
}
export {Message}

4
frontend/static/js/api/client.js
View File

@ -1,6 +1,7 @@
import { Account } from "./account.js";
import { Profile } from "./profile.js";
import { Profiles } from "./profiles.js";
import { Channels } from './chat/channels.js';
function getCookie(name)
{
@ -20,6 +21,9 @@ class Client
this.account = new Account(this);
this.profiles = new Profiles(this);
this._logged = undefined;
this.channels = new Channels(this);
this.channel = undefined;
}
async isAuthentificate()

2
frontend/static/js/views/Chat.js
View File

@ -4,7 +4,7 @@ export default class extends AbstractView {
constructor(params) {
super(params, "Chat");
let url = `ws://${window.location.host}/ws/socket-server/`
let url = `ws://${window.location.host}/ws/chat/`
this.chatSocket = new WebSocket(url)
this.chatSocket.onmessage = function(e){

165
frontend/static/js/views/Search.js
View File

@ -1,5 +1,6 @@
import AbstractView from "./AbstractView.js";
import {client} from "../index.js";
import {Message} from "../api/chat/message.js"
export default class extends AbstractView {
constructor(params) {
@ -8,16 +9,20 @@ export default class extends AbstractView {
async postInit() {
let search = document.getElementById("form");
let search = document.getElementById("input_user");
search.addEventListener("input", this.users)
let chat_input = document.getElementById("input_chat");
//chat_input.addEventListener("keydown", this.chat_manager)
this.users();
this.chat();
}
async users() {
let search = document.getElementById("form").value;
let search = document.getElementById("input_user").value.toLowerCase();
let logged = await client.isAuthentificate();
@ -25,7 +30,7 @@ export default class extends AbstractView {
let list_users = document.getElementById('list_users');
list_users.innerHTML = "";
users.filter(user => user.username.startsWith(search) == true).forEach((user) => {
users.filter(user => user.username.toLowerCase().startsWith(search) == true).forEach((user) => {
var new_user = document.createElement("li");
// username
@ -38,20 +43,41 @@ export default class extends AbstractView {
new_user.appendChild(document.createTextNode(" "));
// chat
if (logged) {
let chat = document.createElement("a");
let array = [
client.me.user_id,
user.user_id,
];
console.log(client.me.id);
chat.addEventListener("click", async function(){
console.log("click");
await client.channels.createChannel([client.me.user_id , user.user_id]);
if (logged && client.me.user_id != user.user_id) {
let add_chat = document.createElement("a");
add_chat.addEventListener("click", async () => {
if (client.channel != undefined) {
client.channel.members_id.forEach((member_id) => {
if (member_id == user.user_id)
client.channel = undefined;
});
if (client.channel == undefined)
return this.hideChat();
client.channel.disconnect();
}
client.channel = await client.channels.createChannel([client.me.user_id , user.user_id], this.chat);
this.chat();
});
//chat.href = `/chat`
chat.appendChild(document.createTextNode("Chat"));
new_user.appendChild(chat);
add_chat.appendChild(document.createTextNode("Chat"));
new_user.appendChild(add_chat);
/*new_user.appendChild(document.createTextNode(" "));
let remove = document.createElement("a");
remove.addEventListener("click", async () => {
if (client.me.user_id != user.user_id) {
await client.channels.deleteChannel([client.me.user_id , user.user_id]);
if
client.channel.disconnect();
client.channel = undefined;
this.chat()
}
});
remove.appendChild(document.createTextNode("Remove"));
new_user.appendChild(remove);*/
}
// break line
@ -69,15 +95,112 @@ export default class extends AbstractView {
}
async chat() {
let logged = await client.isAuthentificate();
let reload = document.getElementById("messages");
if (reload != null)
reload.remove();
reload = document.getElementById("members");
if (reload != null)
reload.remove();
if (client.channel == undefined || !logged)
return ;
let chats = document.getElementById("chats");
if (document.getElementById("chat") == null) {
let chat = document.createElement("div");
chat.id = "chat";
chats.appendChild(chat);
}
// div des messages
let messages = document.createElement("div");
messages.id = "messages";
if (document.getElementById("input_chat") == null)
chat.appendChild(messages);
else
document.getElementById("input_chat").before(messages);
// Input pour rentrer un message
if (document.getElementById("input_chat") == null) {
let chat_input = document.createElement("input");
chat_input.id="input_chat";
chat_input.type="text";
chat_input.name="message";
chat_input.placeholder="message bozo";
chat_input.maxLength=255;
chat.appendChild(chat_input);
chat_input.addEventListener("keydown", async () => {
if (event.keyCode == 13 && client.channel != undefined) {
//let chat_input = document.getElementById("input_chat");
let chat_text = chat_input.value;
await client.channel.sendMessageChannel(chat_text)
// Reset
chat_input.value = "";
}
});
}
// nom des membres du chat
let users = await client.profiles.all();
let members = document.createElement("h2");
members.id = "members";
let usernames = "";
client.channel.members_id.forEach((member_id) => {
if (member_id != client.me.user_id) {
if (usernames.length > 0)
usernames += ", ";
usernames += (users.filter(user => user.user_id == member_id)[0].username);
}
});
members.appendChild(document.createTextNode(usernames));
messages.before(members);
// les messages
client.channel.messages.forEach((message) => {
let text = document.createElement("p");
text.appendChild(document.createTextNode(message.content));
if (message.author_id == client.me.user_id)
text.id = "you";
else
text.id = "other";
messages.appendChild(text);
});
}
async hideChat() {
let close = document.getElementById("chat");
if (close != null)
close.remove();
}
async leavePage() {
if (client.channel != undefined)
client.channel.disconnect();
client.channel = undefined
}
async getHtml() {
return `
<link rel="stylesheet" href="/static/css/search.css">
<input id="form" type="text" name="message" placeholder="userbozo"/>
<div id="users">
<ul id="list_users">
</ul>
<div id="chats">
<div id="users">
<input id="input_user" type="text" name="message" placeholder="userbozo"/>
<ul id="list_users">
</ul>
</div>
</div>
`;