damarowen/script socket dengan html

## script socket dengan html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/style.css">
    <title>Pub Chat</title>
</head>
<body>
    <div id="InfoBox">
        <span id="InfoMessage">

        </span>
    </div>

    <div id="myInfo">
        <h3>About me</h3>
        User Name: <span id="myUserName"></span> <br/>
        Name: <span id="myName"></span> <br/>
        <button onclick="logout()">logout</button>

    </div>


    <div id="loginRegister">
        <div id="login">
            <h3>Login</h3>
            username: <input type="text" id="login_user_name"> <br>
            password: <input type="password" id="login_password"> <br>
            <button onclick="login()">login</button>
        </div>
        <div id="register">
            <h3>Register</h3>
            name: <input type="text" id="register_name"> <br>
            username: <input type="text" id="register_user_name"> <br>
            password: <input type="password" id="register_password"> <br>
            email: <input type="email" id="email"> <br>
            <button onclick="register()">register</button>
        </div>
    </div>


    <div id="chatBox">
        <div class="a-wrapper">

            <div id="messageHolder" class="a-holder">

            </div>
            <br>
            <div id="messageInput" class="input-wrapper">
                <input id="messageText" type="text">
                <button onclick="sendMessage()">Send Message</button>
            </div>
        </div>

    </div>


 <script>
console.log("script.js attached. !!")

//* ada dua socket yang digunakan
//* 1. fetch socket = untuk fetch message
//* url: ws://127.0.0.1:8000/ws/fetch/
//* 2. chat socket = untuk chat
//*  url: ws://127.0.0.1:8000/ws/chat/

let token;
let chatSocket;
let fetchSocket;
let authSocket;
let messageTimeOut;


//* fungsi read local storage
//* fungsi konek chat socket
const connectFetchSocket = () => {
    let ws_scheme = window.location.protocol == "https:" ? "wss://" : "ws://";
    let host = window.location.host
    let path =   '/ws/fetch/'
    let _url =   ws_scheme + host + path
    console.log(_url)

    fetchSocket = new WebSocket(
      _url
    );

    fetchSocket.onerror = event => {
        console.log("fetch Socket error..")
    }

    fetchSocket.onclose = event => {
        console.log("fetch Socket close.")
    }

    fetchSocket.onmessage = (e) => {
        let response = JSON.parse(e.data);

        console.log(response, "<<< response");

        let type = response.type;
        console.log(response.data.message)
        let messageDiv
        if (type == 'fetch_message') {
            for (let i = 0; i < response.data.message.length; i++) {
                messageDiv = getAMessageHTML(
                    response.data.message[i].username,
                    response.data.message[i].message
                );
                document.getElementById("messageHolder").appendChild(messageDiv);
            }
        }
    }
}

const main = async () => {


    connectFetchSocket();

   //* mengambil pesan chat
    fetchSocket.onopen = event => {
        fetchSocket.send(JSON.stringify({
            type: 'fetch_message',
        }))
        console.log("fetch Socket connected..")
        }

    let login = getCookie("token")

    if (login) {
        token = login

        //* start chat WS
        connectChatSocket();
    }


    //* Modify html
    document.getElementById("loginRegister").style.display = 'none';
    document.getElementById("chatBox").style.display = 'block';

}


//* fungsi show message di header
const showMessage = (message) => {
    if (messageTimeOut) {
        clearTimeout(messageTimeOut)
    }
    document.getElementById("InfoMessage").innerText = message;
}


//* fungsi konek chat socket
const connectChatSocket = () => {
    let ws_scheme = window.location.protocol == "https:" ? "wss://" : "ws://";
    let host = window.location.host
    // let path =   '/ws/chat/'
    let path = '/ws/chat/?token=' + token //* token akan di taru di query, dan di pass ke middleware untuk di decode
    let _url =   ws_scheme + host + path
    console.log(_url)

    chatSocket = new WebSocket(
      _url
    );


    chatSocket.onopen = event => {
        console.log("chat Socket connected..")
    }

    chatSocket.onerror = event => {
        console.log("chat Socket error..")
    }

    chatSocket.onclose = event => {
        console.log("chat Socket close.")
    }

    chatSocket.onmessage = (e) => {
        let response = JSON.parse(e.data);

        console.log(response, "<<< response");

        let type = response.type;

        if (type == 'message_error') {
            showMessage(response.data.message);
        }

        if (type == 'final_message') {
            let messageDiv = getAMessageHTML(
                response.data.sender.post.username,
                response.data.message,
            );
            document.getElementById("messageHolder").appendChild(messageDiv);
        }
    }
}


//* fungsi send message ke chat socket
const sendMessage = () => {
    let message = document.getElementById("messageText").value;

    try {
        if (message.length > 0) {
            chatSocket.send(JSON.stringify({
                type: 'message_chat',
                data: {
                    message: message
                }
            }));
            document.getElementById("messageText").value = "";
        }
    } catch (error) {
        document.getElementById("InfoMessage").innerText = "please login first";
        document.getElementById("myInfo").style.display = 'none';
    }

}


//* fungsi untuk menampilkan pesan
const getAMessageHTML = (userName, message) => {

    let outerDiv = document.createElement('div');
    outerDiv.classList.add('a-message');

    let nameDiv = document.createElement('div');
    nameDiv.classList.add('a-message-name');

    let nameSpan = document.createElement('span');
    nameSpan.innerText = ` ${userName}`;
    nameDiv.appendChild(nameSpan);

    outerDiv.appendChild(nameDiv);

    let messageDiv = document.createElement('div');
    messageDiv.classList.add('a-message-message');
    messageDiv.innerText = message;
    outerDiv.appendChild(messageDiv);

    return outerDiv;
}


function getCookie(name) {
    let arr = document.cookie.split(';');
    for (let i = 0; i < arr.length; i++) {
        let str = arr[i];
        let findToken = str.split("=")
        if (findToken[0].trim() == name && findToken[1].trim().length > 5) {
            return findToken[1].trim()
        }
    }
    return "";
}

main()


// const register = () => {
//     console.log("Register.")
//     let name = document.getElementById("register_name").value;
//     let userName = document.getElementById("register_user_name").value;
//     let userPassword = document.getElementById("register_password").value
//     let userEmail = document.getElementById("email").value

//     // console.log("Register.", name, userName, userPassword)

//     const sendRegisterInfo = () => {
//         authSocket.send(JSON.stringify({
//             type: 'register',
//             data: {
//                 name: name,
//                 userName: userName,
//                 password: userPassword,
//                 email: userEmail
//             }
//         }));
//     }

//     if (!authSocket) {
//         // is not connected, let's pass callback, so when connected
//         // cb will be triggered

//         connectAuthSocket(sendRegisterInfo)
//     } else {
//         // socket is already connected so, let's just trigger
//         sendRegisterInfo();
//     }
// }

// const login = () => {

//     let userName = document.getElementById("login_user_name").value;
//     let userPassword = document.getElementById("login_password").value
//     // console.log("Login.", userName, userPassword)

//     const sendLoginInfo = () => {
//         //*type akan dikirim ke consumers sbg indentifier
//         authSocket.send(JSON.stringify({
//             type: 'login',
//             data: {
//                 userName: userName,
//                 password: userPassword
//             }
//         }));
//     }

//     if (!authSocket) {
//         //* menerapkan queue jika auth socket blm aktif, maka akan mengantri
//         connectAuthSocket(sendLoginInfo)
//     } else {
//         sendLoginInfo();
//     }
// }


// const logout = () => {
//     document.cookie = ""
//    main();
// }


//* fungsi konek auth socket
// const connectAuthSocket = (cb) => {
//     let ws_scheme = window.location.protocol == "https:" ? "wss://" : "ws://";
//     console.log(ws_scheme, "<< ws scheme auth socket");


//     //* create route for auth in WS
//     authSocket = new WebSocket(
//         ws_scheme +
//         window.location.host +
//         '/ws/auth/'
//     );
//     console.log(" ~ authSocket", authSocket)

//     authSocket.onopen = event => {
//         console.log("auth Socket connected..")
//         if (cb) {
//             cb();
//         }
//     }

//     authSocket.onmessage = (e) => {
//         let response = JSON.parse(e.data);

//         console.log(response, "<<<< response");

//         let type = response.type;

//         if (type == 'message_error') {
//             showMessage(response.data.message);
//         }

//         if (type == "login_success") {
//             showMessage(response.data.message);

//             document.cookie = `token=${response.data.token}`
//             //* will show userInfo and hide login register
//             readLocalCookie();
//         }
//     }
// }
   </script>


</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="/static/style.css">
	<title>Pub Chat</title>
	</head>
	<body>
	<div id="InfoBox">
	<span id="InfoMessage">

	</span>
	</div>

	<div id="myInfo">
	<h3>About me</h3>
	User Name: <span id="myUserName"></span> <br/>
	Name: <span id="myName"></span> <br/>
	<button onclick="logout()">logout</button>

	</div>


	<div id="loginRegister">
	<div id="login">
	<h3>Login</h3>
	username: <input type="text" id="login_user_name"> <br>
	password: <input type="password" id="login_password"> <br>
	<button onclick="login()">login</button>
	</div>
	<div id="register">
	<h3>Register</h3>
	name: <input type="text" id="register_name"> <br>
	username: <input type="text" id="register_user_name"> <br>
	password: <input type="password" id="register_password"> <br>
	email: <input type="email" id="email"> <br>
	<button onclick="register()">register</button>
	</div>
	</div>


	<div id="chatBox">
	<div class="a-wrapper">

	<div id="messageHolder" class="a-holder">

	</div>
	<br>
	<div id="messageInput" class="input-wrapper">
	<input id="messageText" type="text">
	<button onclick="sendMessage()">Send Message</button>
	</div>
	</div>

	</div>


	<script>
	console.log("script.js attached. !!")

	//* ada dua socket yang digunakan
	//* 1. fetch socket = untuk fetch message
	//* url: ws://127.0.0.1:8000/ws/fetch/
	//* 2. chat socket = untuk chat
	//* url: ws://127.0.0.1:8000/ws/chat/

	let token;
	let chatSocket;
	let fetchSocket;
	let authSocket;
	let messageTimeOut;


	//* fungsi read local storage
	//* fungsi konek chat socket
	const connectFetchSocket = () => {
	let ws_scheme = window.location.protocol == "https:" ? "wss://" : "ws://";
	let host = window.location.host
	let path = '/ws/fetch/'
	let _url = ws_scheme + host + path
	console.log(_url)

	fetchSocket = new WebSocket(
	_url
	);

	fetchSocket.onerror = event => {
	console.log("fetch Socket error..")
	}

	fetchSocket.onclose = event => {
	console.log("fetch Socket close.")
	}

	fetchSocket.onmessage = (e) => {
	let response = JSON.parse(e.data);

	console.log(response, "<<< response");

	let type = response.type;
	console.log(response.data.message)
	let messageDiv
	if (type == 'fetch_message') {
	for (let i = 0; i < response.data.message.length; i++) {
	messageDiv = getAMessageHTML(
	response.data.message[i].username,
	response.data.message[i].message
	);
	document.getElementById("messageHolder").appendChild(messageDiv);
	}
	}
	}
	}

	const main = async () => {


	connectFetchSocket();

	//* mengambil pesan chat
	fetchSocket.onopen = event => {
	fetchSocket.send(JSON.stringify({
	type: 'fetch_message',
	}))
	console.log("fetch Socket connected..")
	}

	let login = getCookie("token")

	if (login) {
	token = login

	//* start chat WS
	connectChatSocket();
	}


	//* Modify html
	document.getElementById("loginRegister").style.display = 'none';
	document.getElementById("chatBox").style.display = 'block';

	}


	//* fungsi show message di header
	const showMessage = (message) => {
	if (messageTimeOut) {
	clearTimeout(messageTimeOut)
	}
	document.getElementById("InfoMessage").innerText = message;
	}


	//* fungsi konek chat socket
	const connectChatSocket = () => {
	let ws_scheme = window.location.protocol == "https:" ? "wss://" : "ws://";
	let host = window.location.host
	// let path = '/ws/chat/'
	let path = '/ws/chat/?token=' + token //* token akan di taru di query, dan di pass ke middleware untuk di decode
	let _url = ws_scheme + host + path
	console.log(_url)

	chatSocket = new WebSocket(
	_url
	);


	chatSocket.onopen = event => {
	console.log("chat Socket connected..")
	}

	chatSocket.onerror = event => {
	console.log("chat Socket error..")
	}

	chatSocket.onclose = event => {
	console.log("chat Socket close.")
	}

	chatSocket.onmessage = (e) => {
	let response = JSON.parse(e.data);

	console.log(response, "<<< response");

	let type = response.type;

	if (type == 'message_error') {
	showMessage(response.data.message);
	}

	if (type == 'final_message') {
	let messageDiv = getAMessageHTML(
	response.data.sender.post.username,
	response.data.message,
	);
	document.getElementById("messageHolder").appendChild(messageDiv);
	}
	}
	}


	//* fungsi send message ke chat socket
	const sendMessage = () => {
	let message = document.getElementById("messageText").value;

	try {
	if (message.length > 0) {
	chatSocket.send(JSON.stringify({
	type: 'message_chat',
	data: {
	message: message
	}
	}));
	document.getElementById("messageText").value = "";
	}
	} catch (error) {
	document.getElementById("InfoMessage").innerText = "please login first";
	document.getElementById("myInfo").style.display = 'none';
	}

	}


	//* fungsi untuk menampilkan pesan
	const getAMessageHTML = (userName, message) => {

	let outerDiv = document.createElement('div');
	outerDiv.classList.add('a-message');

	let nameDiv = document.createElement('div');
	nameDiv.classList.add('a-message-name');

	let nameSpan = document.createElement('span');
	nameSpan.innerText = ` ${userName}`;
	nameDiv.appendChild(nameSpan);

	outerDiv.appendChild(nameDiv);

	let messageDiv = document.createElement('div');
	messageDiv.classList.add('a-message-message');
	messageDiv.innerText = message;
	outerDiv.appendChild(messageDiv);

	return outerDiv;
	}


	function getCookie(name) {
	let arr = document.cookie.split(';');
	for (let i = 0; i < arr.length; i++) {
	let str = arr[i];
	let findToken = str.split("=")
	if (findToken[0].trim() == name && findToken[1].trim().length > 5) {
	return findToken[1].trim()
	}
	}
	return "";
	}

	main()


	// const register = () => {
	// console.log("Register.")
	// let name = document.getElementById("register_name").value;
	// let userName = document.getElementById("register_user_name").value;
	// let userPassword = document.getElementById("register_password").value
	// let userEmail = document.getElementById("email").value

	// // console.log("Register.", name, userName, userPassword)

	// const sendRegisterInfo = () => {
	// authSocket.send(JSON.stringify({
	// type: 'register',
	// data: {
	// name: name,
	// userName: userName,
	// password: userPassword,
	// email: userEmail
	// }
	// }));
	// }

	// if (!authSocket) {
	// // is not connected, let's pass callback, so when connected
	// // cb will be triggered

	// connectAuthSocket(sendRegisterInfo)
	// } else {
	// // socket is already connected so, let's just trigger
	// sendRegisterInfo();
	// }
	// }

	// const login = () => {

	// let userName = document.getElementById("login_user_name").value;
	// let userPassword = document.getElementById("login_password").value
	// // console.log("Login.", userName, userPassword)

	// const sendLoginInfo = () => {
	// //*type akan dikirim ke consumers sbg indentifier
	// authSocket.send(JSON.stringify({
	// type: 'login',
	// data: {
	// userName: userName,
	// password: userPassword
	// }
	// }));
	// }

	// if (!authSocket) {
	// //* menerapkan queue jika auth socket blm aktif, maka akan mengantri
	// connectAuthSocket(sendLoginInfo)
	// } else {
	// sendLoginInfo();
	// }
	// }


	// const logout = () => {
	// document.cookie = ""
	// main();
	// }


	//* fungsi konek auth socket
	// const connectAuthSocket = (cb) => {
	// let ws_scheme = window.location.protocol == "https:" ? "wss://" : "ws://";
	// console.log(ws_scheme, "<< ws scheme auth socket");


	// //* create route for auth in WS
	// authSocket = new WebSocket(
	// ws_scheme +
	// window.location.host +
	// '/ws/auth/'
	// );
	// console.log(" ~ authSocket", authSocket)

	// authSocket.onopen = event => {
	// console.log("auth Socket connected..")
	// if (cb) {
	// cb();
	// }
	// }

	// authSocket.onmessage = (e) => {
	// let response = JSON.parse(e.data);

	// console.log(response, "<<<< response");

	// let type = response.type;

	// if (type == 'message_error') {
	// showMessage(response.data.message);
	// }

	// if (type == "login_success") {
	// showMessage(response.data.message);

	// document.cookie = `token=${response.data.token}`
	// //* will show userInfo and hide login register
	// readLocalCookie();
	// }
	// }
	// }
	</script>


	</body>
	</html>