80 lines
1.8 KiB
HTML
80 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<input type="checkbox" id="chat_input" style="display: none;"/>
|
|
|
|
<div class="chat_box">
|
|
|
|
<div class="chat_item controls_area">
|
|
</div>
|
|
|
|
<label class="chat_item open_close button" for="chat_input">
|
|
<p>chat</p>
|
|
</label>
|
|
|
|
<div class="chat_item msg_thread">
|
|
<div class="msg_box" id="msg_thread">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat_item msg_write">
|
|
<div class="text_area" id="msg_write" contenteditable>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="chat_item msg_send button" onclick="submit_new_message()">
|
|
<p>send</p>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- https://socket.io/docs/v4/client-installation/ -->
|
|
<!-- https://socket.io/docs/v4/client-api/ -->
|
|
<script src="https://cdn.socket.io/4.5.3/socket.io.min.js" integrity="sha384-WPFUvHkB1aHA5TDSZi6xtDgkF0wXJcIIxXhC6h8OT8EH3fC5PWro5pWJ1THjcfEi" crossorigin="anonymous"></script>
|
|
<script>
|
|
const socket = io("http://localhost:3000");
|
|
socket.on("connect", () => {
|
|
console.log("client: connection");
|
|
});
|
|
</script>
|
|
|
|
<script src="./chat_submit_msg.js"></script>
|
|
<script src="./chat_receive_msg.js"></script>
|
|
|
|
|
|
<!--
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script>
|
|
|
|
let socket = io();
|
|
|
|
let send = function () {
|
|
let text = document.getElementById('message').value;
|
|
socket.emit('chat_message', text);
|
|
}
|
|
|
|
let receive = function (msg) {
|
|
let li = document.createElement('li');
|
|
li.innerText = msg;
|
|
document.getElementById('messages').appendChild(li);
|
|
}
|
|
socket.on('chat_message', receive);
|
|
|
|
</script>
|
|
|
|
<div>
|
|
<ul id="messages"></ul>
|
|
<input id="message" type="text"/>
|
|
<button onclick="send()">send</button>
|
|
</div>
|
|
-->
|
|
</body>
|
|
</html>
|