WebSocket JSON

pull/1/head
adb 4 years ago
parent 237e7e7a66
commit b5513e4eae

@ -23,9 +23,15 @@ const wss = new ws.Server({
//WS handler //WS handler
wss.on('connection', (ws, req) => { wss.on('connection', (ws, req) => {
console.log(`${req.socket.remoteAddress} connected`) console.log(`${req.socket.remoteAddress} connected`)
ws.on('message', msg => { ws.on('message', msgJSON => {
console.log(`${req.socket.remoteAddress} => ${msg}`) let msg = JSON.parse(msgJSON)
if (msg.split(';', 2)[0] === 'message') wss.clients.forEach(clients => clients.send(msg)) 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))
}) })

@ -1,8 +1,8 @@
<template> <template>
<div id="app"> <div id="app">
<div class="content"> <div class="content">
<div class="messages"> <div class="messagesContainer">
<div class="spacer" style="height: 1rem;"></div> <div id="messages" class="messages">
<message msg="Hey :D" /> <message msg="Hey :D" />
<message msg="Du bist blööööd xD" /> <message msg="Du bist blööööd xD" />
<messageReceive msg="Du auch" /> <messageReceive msg="Du auch" />
@ -24,10 +24,10 @@
<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" /> <message msg="und Kuchen :P" />
<div class="spacer" style="height: 1rem;"></div> </div>
</div> </div>
<newMessage /> <newMessage />
<error msg="fehler!"/> <error />
</div> </div>
</div> </div>
</template> </template>
@ -47,36 +47,6 @@ export default {
error 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> </script>
<style> <style>
@ -102,15 +72,20 @@ body{
background-color: #313131; background-color: #313131;
box-shadow: 3px 3px 10px #111; box-shadow: 3px 3px 10px #111;
} }
.messages{ .messagesContainer{
position: absolute; position: absolute;
margin: 0; margin: 0;
padding-bottom: 1rem;
left: 0; left: 0;
top: 0; top: 0;
height: calc(100% - 4rem); height: calc(100% - 5rem);
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
} }
.messages{
margin-top: 1rem;
margin-bottom: 1rem;
}
@media (max-width: 55rem){ @media (max-width: 55rem){
.content{ .content{

@ -1,12 +1,13 @@
<template> <template>
<div class="newMessageBanner"> <div class="newMessageBanner">
<textarea id="newMessageInput" class="newMessageInput" placeholder="type a message ..." type="text" v-model="content" /> <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> </div>
</template> </template>
<script> <script>
import icon from './icon.vue'; import icon from './icon.vue';
import sendMessage from '../main.js';
export default { export default {
name: "newMessage", name: "newMessage",
@ -18,9 +19,14 @@ export default {
}, },
mounted() { mounted() {
ResizeListener(document.getElementById("newMessageInput")); 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}
} }
} }

@ -6,3 +6,59 @@ Vue.config.productionTip = false
new Vue({ new Vue({
render: h => h(App), render: h => h(App),
}).$mount('#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))
}
Loading…
Cancel
Save