概要
bloggerに、chat載せてみた。
写真
サンプルコード
<html>
<head>
<style>
#messages {
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
max-width: 500px;
background-color: #7493c7; /* LINE風の背景色 */
border-radius: 8px;
min-height: 600px;
}
.msg-box {
max-width: 70%;
padding: 8px 12px;
border-radius: 15px;
font-size: 14px;
word-break: break-all;
}
.msg-right {
align-self: flex-end;
background-color: #85e249;
color: #000;
border-top-right-radius: 2px;
}
.msg-left {
align-self: flex-start;
background-color: #ffffff;
color: #000;
border-top-left-radius: 2px;
}
.msg-system {
align-self: center;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
font-size: 11px;
padding: 4px 8px;
border-radius: 10px;
}
</style>
</head>
<body>
<form name="publish">
<input type="text" name="message" maxlength="50"/>
<input type="submit" value="Send"/>
</form>
<div id="messages"></div>
<script>
let url = "wss://cloud.achex.ca";
let socket = new WebSocket(url);
const targetHub = "ohisama_hub";
const myUsername = "user_" + Math.floor(Math.random() * 1000);
const myPassword = "none";
let isJoined = false;
let mySID = null;
document.forms.publish.onsubmit = function() {
let outgoingMessage = this.message.value;
if (!outgoingMessage.trim())
return false;
if (!isJoined)
{
showSystemMessage("まだハブへの参加が完了していません。");
return false;
}
let payload = {
toH: targetHub,
chatMessage: outgoingMessage
};
socket.send(JSON.stringify(payload));
showChatMessage(outgoingMessage, true, myUsername);
this.message.value = '';
return false;
};
socket.onmessage = function(event) {
let incomingMessage = event.data;
try
{
let parsed = JSON.parse(incomingMessage);
if (parsed.auth === "OK" && parsed.SID)
{
mySID = parsed.SID;
showSystemMessage(`認証成功！ あなたのSIDは [${mySID}] です。`);
socket.send(JSON.stringify({ joinHub: targetHub }));
return;
}
if (parsed.joinHub === "OK")
{
isJoined = true;
showSystemMessage(`ハブ [${targetHub}] に参加しました！チャット可能です。`);
return;
}
if (parsed.chatMessage)
{
showChatMessage(parsed.chatMessage, false, parsed.FROM || parsed.sID);
}
}
catch (e)
{
if (incomingMessage !== '{"lt":""}')
{
showSystemMessage(incomingMessage);
}
}
};
socket.onopen = event => {
showSystemMessage("サーバーに接続中...");
let authCommand = {
auth: myUsername,
passwd: myPassword
};
socket.send(JSON.stringify(authCommand));
};
socket.onclose = event => showSystemMessage(`切断されました (コード: ${event.code})`);
socket.onerror = event => showSystemMessage("通信エラーが発生しました。");
function showChatMessage(text, isMe, sender) {
let messageElem = document.createElement('div');
if (isMe)
{
messageElem.className = 'msg-box msg-right';
messageElem.textContent = text;
}
else
{
messageElem.className = 'msg-box msg-left';
messageElem.textContent = `[ID:${sender}] ${text}`;
}
document.getElementById('messages').appendChild(messageElem);
}
function showSystemMessage(text) {
let messageElem = document.createElement('div');
messageElem.className = 'msg-box msg-system';
messageElem.textContent = text;
document.getElementById('messages').appendChild(messageElem);
}
showSystemMessage("start");
</script>
</body>
</html>
成果物
以上。