Last active
December 5, 2021 03:47
-
-
Save damarowen/81509c6ec561514c33d75bb5cbe4fbf1 to your computer and use it in GitHub Desktop.
script socket dengan html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment