new tests on chat
This commit is contained in:
@@ -25,6 +25,10 @@
|
||||
</div>
|
||||
|
||||
<div class="chat_item msg_write">
|
||||
<!--
|
||||
<textarea class="text_area" id="msg_write">
|
||||
</textarea>
|
||||
-->
|
||||
<div class="text_area" id="msg_write" contenteditable>
|
||||
</div>
|
||||
</div>
|
||||
@@ -37,19 +41,9 @@
|
||||
|
||||
|
||||
<!-- 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 src="https://cdn.socket.io/4.5.3/socket.io.min.js"></script>
|
||||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
|
||||
integrity="sha384-WPFUvHkB1aHA5TDSZi6xtDgkF0wXJcIIxXhC6h8OT8EH3fC5PWro5pWJ1THjcfEi"
|
||||
crossorigin="anonymous"
|
||||
import { io } from "https://cdn.socket.io/4.5.3/socket.io.min.js";
|
||||
-->
|
||||
<script type="module">
|
||||
import { io } from "https://cdn.socket.io/4.4.1/socket.io.esm.min.js";
|
||||
<script>
|
||||
const socket = io("http://localhost:3000");
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
|
||||
socket.on('message', ({ data }) => {
|
||||
handle_new_message(data);
|
||||
});
|
||||
|
||||
const handle_new_message = (message) => {
|
||||
const div_thread = document.getElementById('msg_thread');
|
||||
|
||||
console.log("received message:");
|
||||
console.log(`[${message}]`);
|
||||
|
||||
div_thread.appendChild(build_new_message(message));
|
||||
}
|
||||
|
||||
const build_new_message = (message) => {
|
||||
const p = document.createElement("p");
|
||||
p.appendChild(document.createTextNode(message));
|
||||
return p;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
|
||||
const div_msg = document.getElementById('msg_write');
|
||||
const div_thread = document.getElementById('msg_thread');
|
||||
|
||||
const submit_new_message = () => {
|
||||
if (is_valid_msg)
|
||||
socket.emit('message', { data: div_msg.value });
|
||||
}
|
||||
|
||||
socket.on('message', ({ data }) => {
|
||||
handle_new_message(data);
|
||||
});
|
||||
|
||||
const handle_new_message = (message) => {
|
||||
div_thread.appendChild(build_new_message(message));
|
||||
}
|
||||
|
||||
const build_new_message = (message) => {
|
||||
const p = document.createElement("p");
|
||||
p.appendChild(document.createTextNode(message));
|
||||
return p;
|
||||
}
|
||||
|
||||
@@ -1,24 +1,18 @@
|
||||
|
||||
const div_msg = document.getElementById('msg_write');
|
||||
const div_thread = document.getElementById('msg_thread');
|
||||
|
||||
const submit_new_message = () => {
|
||||
if (is_valid_msg)
|
||||
socket.emit('message', { data: div_msg.value });
|
||||
const div_msg = document.getElementById('msg_write');
|
||||
/*
|
||||
const msg = div_msg.value;
|
||||
const msg = div_msg.innerText;
|
||||
*/
|
||||
const msg = div_msg.innerText.trim();
|
||||
|
||||
console.log("msg:");
|
||||
console.log(`[${msg}]`);
|
||||
console.log(msg.length);
|
||||
|
||||
if (msg.length > 0)
|
||||
socket.emit('message', { data: msg });
|
||||
}
|
||||
|
||||
socket.on('message', ({ data }) => {
|
||||
handle_new_message(data);
|
||||
});
|
||||
|
||||
const handle_new_message = (message) => {
|
||||
div_thread.appendChild(build_new_message(message));
|
||||
}
|
||||
|
||||
const build_new_message = (message) => {
|
||||
const p = document.createElement("p");
|
||||
p.appendChild(document.createTextNode(message));
|
||||
return p;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -5,6 +5,12 @@
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
max-height: 300px;
|
||||
/*
|
||||
resize: none;
|
||||
*/
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
background-color: white;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user