chat/client.js at main · sharique827/chat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
// const socket = io('http://localhost:8000')

// const name = prompt("Enter Your Name to Join the Chat : ")
// socket.emit("new-user-joined",name)

// const messageContainer = document.getElementById("message-container")
// function appendMessage(message,pos){
//     const msg = document.createElement("div")
//     msg.innerHTML = message
//     msg.classList.add("alert")
//     msg.classList.add("alert-secondary")
//     if(pos=='left'){
//         msg.classList.add("left")
//         msg.classList.add("alert-primary")
//     }
//     else{
//         msg.classList.add("right")
//         msg.classList.add("alert-success")
//     }

//     messageContainer.appendChild(msg)
// }

// socket.on("user-joined",(name)=>{
//     appendMessage(`${name} Joined the Chat`,"left")
// })
// socket.on("user-left",(name)=>{
//     appendMessage(`${name} left the chat`,"left")
// })
// socket.on("receive",(data)=>{
//     appendMessage(`${data.name} : ${data.message}`,"left")
// })

// function sendMessage(){
//     const msg=document.getElementById("msg")
//     socket.emit("send",msg.value)
//     appendMessage(`You : ${msg.value}`,"right")
//     msg.value=""
// }


const socket = io('http://localhost:8000')

const name = prompt("Enter Your Name to Join the Group Chat")
socket.emit("new-user-joined",name)

const messageContainer = document.getElementById("message-container")
function appendMessage(message,pos){
    const msg = document.createElement("div")
    msg.innerHTML = message
    msg.classList.add("alert")
    msg.classList.add("alert-secondary")
    if(pos=='left'){
        msg.classList.add("left")
        msg.classList.add("alert-primary")
    }
    else{
        msg.classList.add("right")
        msg.classList.add("alert-success")
    }

    messageContainer.appendChild(msg)
}
function add(message){
    const msg = document.createElement("h6")
    msg.innerHTML = message
    msg.classList.add("text-dark")
    msg.classList.add("p-2")
        msg.classList.add("text-center")
        msg.classList.add("w-100")
        msg.classList.add("bg-light")
        msg.classList.add("join")
    messageContainer.appendChild(msg)
}
function removed(message){
    const msg = document.createElement("p")
    msg.innerHTML = message
    msg.classList.add("text-secondary")
        msg.classList.add("text-center")
        msg.classList.add("w-100")
        msg.classList.add("join")
    messageContainer.appendChild(msg)
}

socket.on("user-joined",(name)=>{
    add(`${name} Joined the Chat`)
})
socket.on("user-left",(name)=>{
    removed(`${name} left the chat`,"left")
})
socket.on("receive",(data)=>{
    appendMessage(`${data.name} : ${data.message}`,"left")
})

function sendMessage(){
    const msg=document.getElementById("msg")
    const wrong=document.getElementById("wrongmessage")
    if(msg.value==""){
       wrong.style.display="block",
       wrong.innerHTML="Please Write Something..."
       wrong.classList.add("text-danger")
       wrong.classList.add("text-center")
    }
    else{
    wrong.style.display="none"
    socket.emit("send",msg.value)
    appendMessage(`You : ${msg.value}`,"right")
    msg.value=""
}
}