adb
/
matrix-chat
2
3
Fork 1
Code Issues Pull Requests Releases Wiki Activity

WebSocket JSON

Browse Source
pull/1/head
adb 4 years ago
parent 237e7e7a66
commit b5513e4eae
4 changed files with 108 additions and 65 deletions
Show Stats Download Patch File Download Diff File

14
api.js
Unescape Escape View File

@ -23,9 +23,15 @@ const wss = new ws.Server({
//WS handler
wss.on('connection', (ws, req) => {
console.log(`${req.socket.remoteAddress} connected`)
ws.on('message', msg => {
console.log(`${req.socket.remoteAddress} => ${msg}`)
if (msg.split(';', 2)[0] === 'message') wss.clients.forEach(clients => clients.send(msg))
ws.on('message', msgJSON => {
let msg = JSON.parse(msgJSON)
console.log(`${req.socket.remoteAddress} => ${msgJSON}`)
if (msg.type === 'message') wss.clients.forEach(client => client.send(msgJSON))
})
ws.send('websocket connected')
let msg = {
type: "info",
time: Date.now(),
content: "connected"
}
ws.send(JSON.stringify(msg))
})

89
src/App.vue
Unescape Escape View File

@ -1,33 +1,33 @@
<template>
<div id="app">
<div class="content">
<div class="messages">
<div class="spacer" style="height: 1rem;"></div>
<message msg="Hey :D" />
<message msg="Du bist blööööd xD" />
<messageReceive msg="Du auch" />
<message msg="lol" />
<messageReceive msg="Du bist voll blöd, ich hasse dich, warum tust du das?!" />
<message msg="Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut imperdiet vel risus tristique mollis. Proin aliquam felis non vehicula ornare.
Fusce scelerisque pellentesque erat quis sollicitudin.
Quisque aliquet, ligula ut volutpat vulputate, ligula lorem dictum velit, et aliquam sapien orci sed magna.
Nam suscipit ex eget urna accumsan pulvinar. Pellentesque fringilla placerat feugiat.
Aenean aliquam vestibulum metus. Nulla augue turpis, consectetur vitae quam ac, porttitor rhoncus nunc.
Nullam non turpis consequat, placerat lectus nec, ornare orci.
Fusce lorem tortor, viverra ac suscipit sit amet, scelerisque id eros.
Suspendisse et ultricies elit, vitae pretium ipsum. Suspendisse vel ex in turpis pulvinar feugiat. "
/>
<messageReceive msg="Du hast Pizza!" />
<message msg="und Kuchen :P" />
<message msg="und Kuchen :P" />
<message msg="und Kuchen :P" />
<message msg="und Kuchen :P" />
<message msg="und Kuchen :P" />
<div class="spacer" style="height: 1rem;"></div>
<div class="messagesContainer">
<div id="messages" class="messages">
<message msg="Hey :D" />
<message msg="Du bist blööööd xD" />
<messageReceive msg="Du auch" />
<message msg="lol" />
<messageReceive msg="Du bist voll blöd, ich hasse dich, warum tust du das?!" />
<message msg="Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut imperdiet vel risus tristique mollis. Proin aliquam felis non vehicula ornare.
Fusce scelerisque pellentesque erat quis sollicitudin.
Quisque aliquet, ligula ut volutpat vulputate, ligula lorem dictum velit, et aliquam sapien orci sed magna.
Nam suscipit ex eget urna accumsan pulvinar. Pellentesque fringilla placerat feugiat.
Aenean aliquam vestibulum metus. Nulla augue turpis, consectetur vitae quam ac, porttitor rhoncus nunc.
Nullam non turpis consequat, placerat lectus nec, ornare orci.
Fusce lorem tortor, viverra ac suscipit sit amet, scelerisque id eros.
Suspendisse et ultricies elit, vitae pretium ipsum. Suspendisse vel ex in turpis pulvinar feugiat. "
/>
<messageReceive msg="Du hast Pizza!" />
<message msg="und Kuchen :P" />
<message msg="und Kuchen :P" />
<message msg="und Kuchen :P" />
<message msg="und Kuchen :P" />
<message msg="und Kuchen :P" />
</div>
</div>
<newMessage />
<error msg="fehler!"/>
<error />
</div>
</div>
</template>
@ -47,36 +47,6 @@ export default {
error
}
}
const wsurl = 'ws://127.0.0.1:8090'
const socket = new WebSocket(wsurl)
function element(id){ return document.getElementById(id)}
socket.onopen = () => {
socket.send('new session')
}
socket.onerror = (error) => {
console.log(`WebSocket error: ${error}`)
}
socket.onclose = () => show_error('session timed out (refresh)')
socket.onmessage = (e) => {
console.log(e.data)
let msg = e.data.split(";", 2)
if (msg[0] === 'error') show_error(msg[1])
else if (msg[0] === 'message');
}
function show_error(msg) {
let error_style = element('errorBox').style
element('errorMessage').innerText = msg
error_style.display = "block"
error_style.animation = "slide-from-left alternate 0.2s"
setTimeout(() => {error_style.animation = ""}, 200)
}
/*function sendMessage(msg, user){
socket.send(`message;${user};${msg}`)
}*/
</script>
<style>
@ -102,15 +72,20 @@ body{
background-color: #313131;
box-shadow: 3px 3px 10px #111;
}
.messages{
.messagesContainer{
position: absolute;
margin: 0;
padding-bottom: 1rem;
left: 0;
top: 0;
height: calc(100% - 4rem);
height: calc(100% - 5rem);
width: 100%;
overflow-y: auto;
}
.messages{
margin-top: 1rem;
margin-bottom: 1rem;
}
@media (max-width: 55rem){
.content{

14
src/components/newMessage.vue
Unescape Escape View File

@ -1,12 +1,13 @@
<template>
<div class="newMessageBanner">
<textarea id="newMessageInput" class="newMessageInput" placeholder="type a message ..." type="text" v-model="content" />
<icon onclick="sendMessage()" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="../sym/ic_send_white_24px.svg" />
<icon id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="../sym/ic_send_white_24px.svg" />
</div>
</template>
<script>
import icon from './icon.vue';
import sendMessage from '../main.js';
export default {
name: "newMessage",
@ -18,9 +19,14 @@ export default {
},
mounted() {
ResizeListener(document.getElementById("newMessageInput"));
/*EventListener.$on('EVENT_NAME', function (){
});*/
document.getElementById("sendMessageBtn").addEventListener("click", () => {
sendMessage.methods.callSendMessage(document.getElementById("newMessageInput").value)
document.getElementById("newMessageInput").value = ''
//sendMessage.methods.callSendMessage(this.data.message)
})
},
data: function () {
return { message: this.content}
}
}

56
src/main.js
Unescape Escape View File

@ -6,3 +6,59 @@ Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
export default {
mounted() {
sendMessage()
},
methods: {
callSendMessage(data) {
sendMessage(data)
}
}
}
const wsurl = 'ws://127.0.0.1:8090'
const socket = new WebSocket(wsurl)
function element(id){ return document.getElementById(id)}
socket.onopen = () => {
let msg = {
type: "info",
time: Date.now(),
content: "new session"
}
socket.send(JSON.stringify(msg))
}
socket.onerror = (error) => {
console.log(`WebSocket error: ${error}`)
}
socket.onclose = () => show_error('session timed out (refresh)')
socket.onmessage = (e) => {
console.log(`data received => ${e.data}`)
let msg = JSON.parse(e.data)
if (msg.type === 'error') show_error(msg.content)
else if (msg.type === 'message'){
element('messages').innerHTML += `<messageReceive msg="${msg.content.message}" />`;
}
}
function show_error(msg) {
let error_style = element('errorBox').style
element('errorMessage').innerText = msg
error_style.display = "block"
error_style.animation = "slide-from-left alternate 0.2s"
setTimeout(() => {error_style.animation = ""}, 200)
}
function sendMessage(message){
let msg = {
type: "message",
time: Date.now(),
content: {
message: message
}
}
socket.send(JSON.stringify(msg))
}
Write Preview
Loading…
Cancel
Save