WebSocket JSON
This commit is contained in:
parent
237e7e7a66
commit
b5513e4eae
14
api.js
14
api.js
@ -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
89
src/App.vue
@ -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{
|
||||
|
||||
@ -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
56
src/main.js
@ -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))
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user