testing chat hamsters

master
louisa 1 year ago
parent 09e4a1cd8d
commit 17d7285aa4

@ -13,8 +13,8 @@ var udpPort = new osc.UDPPort({
localPort: 57121, localPort: 57121,
// This is where sclang is listening for OSC messages. // This is where sclang is listening for OSC messages.
remoteAddress: "192.168.2.147", //this is the hamsters ip remoteAddress: "192.168.2.151", //this is the hamsters ip
remotePort: 57120, //this is the hamsters port :*s remotePort: 8080, //this is the hamsters port :*s
metadata: true metadata: true
}); });
@ -59,10 +59,10 @@ io.on('connection', function(socket) {
var oscmsg = { var oscmsg = {
address: "/silentserver", address: "/silentserver",
args: [ args: [
{ // {
type: "s", // type: "s",
value: "user" // value: "user"
}, // },
{ {
type: "s", type: "s",
value: msg value: msg

@ -19,8 +19,13 @@
<div class="wrapper"> <div class="wrapper">
<div class="flex-container"> <div class="flex-container">
<div class="flex-left"> <div class="flex-left">
<div class="section"> <div class="section" id="chat-window">
<ul id="messages"></ul> <ul id="messages"></ul>
<span><form id="form" action="">
<input id="input" autocomplete="off"/><button onclick="sendMessage()">>>></button>
</form></span>
</div>
<div class="section">
<!-- <progress id="file" max="100" value="70"> 70% </progress> --> <!-- <progress id="file" max="100" value="70"> 70% </progress> -->
<p>>>> CACHE CODE:</p> <p>>>> CACHE CODE:</p>
<span><form id="form" action=""> <span><form id="form" action="">
@ -198,6 +203,10 @@
//testing socket message from textinput field to arduino //testing socket message from textinput field to arduino
var messages = document.getElementById('messages'); var messages = document.getElementById('messages');
var chatHistory = localStorage.getItem('chatHistory');
if (chatHistory) {
messages.innerHTML = chatHistory;
}
function sendMessage() { function sendMessage() {
@ -207,15 +216,10 @@
item.textContent = message; item.textContent = message;
item.className = 'me'; item.className = 'me';
messages.appendChild(item); messages.appendChild(item);
if (message === 'BLINK') {
socket.emit('blink');
console.log('socket: blink');
}
inputField.value = ''; inputField.value = '';
socket.emit('chat message', message); socket.emit('chat message', message);
messages.scrollTop = messages.scrollHeight;
localStorage.setItem('chatHistory', messages.innerHTML);
} }
@ -224,8 +228,10 @@
item.textContent = msg; item.textContent = msg;
item.className = 'others'; item.className = 'others';
messages.appendChild(item); messages.appendChild(item);
messages.scrollTop = messages.scrollHeight - messages.clientHeight;
}); });
</script> </script>
<script type="text/javascript" src="js/input.js"></script>S <script type="text/javascript" src="js/input.js"></script>
</html> </html>

@ -335,3 +335,45 @@ button:active{
#location-log{ #location-log{
display: none; display: none;
} }
#chat-window{
height: 40vh;
border: 1px solid #ccc;
padding: 10px;
overflow-y: scroll;
}
#messages {
height: 40vh;
overflow-y: auto;
padding: 0;
word-wrap: break-word;
}
#messages li {
padding: 5px;
margin-bottom: 10px;
display: block;
}
.me {
text-align: right;
color: #e8b722;
padding-bottom: 2px;
border-radius: 4px;
display: inline-block;
}
.others {
text-align: left;
color: #DE6C3F;
border-radius: 4px;
display: inline-block;
}
input[type="text"] {
padding: 5px;
}

Loading…
Cancel
Save