Merge remote-tracking branch 'origin/master' into chatInformations
# Conflicts: # src/App.vueHomeChats
commit
c31a08e5ea
@ -0,0 +1,37 @@
|
||||
const ws = require('ws')
|
||||
|
||||
//WS server
|
||||
const wss = new ws.Server({
|
||||
port: 8090,
|
||||
perMessageDeflate: {
|
||||
zlibDeflateOptions: {
|
||||
chunkSize: 1024,
|
||||
memLevel: 7,
|
||||
level: 3
|
||||
},
|
||||
zlibInflateOptions: {
|
||||
chunkSize: 10 * 1024
|
||||
},
|
||||
clientNoContextTakeover: true,
|
||||
serverNoContextTakeover: true,
|
||||
serverMaxWindowBits: 10,
|
||||
concurrencyLimit: 10,
|
||||
threshold: 1024
|
||||
}
|
||||
});
|
||||
|
||||
//WS handler
|
||||
wss.on('connection', (ws, req) => {
|
||||
console.log(`${req.socket.remoteAddress} connected`)
|
||||
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))
|
||||
})
|
||||
let msg = {
|
||||
type: "info",
|
||||
time: Date.now(),
|
||||
content: "connected"
|
||||
}
|
||||
ws.send(JSON.stringify(msg))
|
||||
})
|
||||
|
Before Width: | Height: | Size: 210 B After Width: | Height: | Size: 210 B |
@ -0,0 +1,4 @@
|
||||
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 265 B |
|
Before Width: | Height: | Size: 201 B After Width: | Height: | Size: 201 B |
|
Before Width: | Height: | Size: 350 B After Width: | Height: | Size: 350 B |
|
Before Width: | Height: | Size: 465 B After Width: | Height: | Size: 465 B |
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div id="errorBox" class="errorBox">
|
||||
<icon class="errorBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
|
||||
<div id="errorMessage" class="btnText">
|
||||
{{msg}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icon from './icon.vue';
|
||||
|
||||
export default {
|
||||
name: "error",
|
||||
components: {
|
||||
icon
|
||||
},
|
||||
props:{
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.errorBox{
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
height: 10rem;
|
||||
width: 16rem;
|
||||
background-color: #E53935;
|
||||
border-radius: 15px;
|
||||
box-shadow: 3px 3px 10px #111;
|
||||
}
|
||||
#errorBox{
|
||||
display: none;
|
||||
}
|
||||
.btnText {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 1.2rem;
|
||||
color: #fff;
|
||||
font-family:Arial, "lucida console", sans-serif;
|
||||
}
|
||||
.errorBtn{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: #0000;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@keyframes slide-from-left{
|
||||
from{left:-30rem;opacity: 0}
|
||||
to{left:1rem;opacity: 1}
|
||||
}
|
||||
|
||||
@media (max-width: 35rem) {
|
||||
.errorBox {
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
height: 8rem;
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<button class="btn">
|
||||
<div class="btnText">{{text}}</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "textbtn",
|
||||
props:{
|
||||
text: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.btn{
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
height: 2.5rem;
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
background-color: #00BCD4;
|
||||
box-shadow: 3px 3px 10px #222;
|
||||
border-radius: 1.25rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
.btnText {
|
||||
position: relative;
|
||||
font-size: 1.4rem;
|
||||
color:#fff;
|
||||
font-family:Arial, "lucida console", sans-serif;
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +1,107 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import App from './App.vue'
|
||||
import login from './views/login.vue'
|
||||
import chat from './views/chat.vue'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const router = new VueRouter({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: login
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: login
|
||||
},
|
||||
{
|
||||
path: '/chat',
|
||||
name: 'chat',
|
||||
component: chat
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
el: '#app',
|
||||
router,
|
||||
template: '<App/>',
|
||||
components: {App}
|
||||
}).$mount('#app')
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
sendMessage()
|
||||
},
|
||||
methods: {
|
||||
sendMessage(message){
|
||||
let msg = {
|
||||
type: "message",
|
||||
time: Date.now(),
|
||||
content: {
|
||||
message: message
|
||||
}
|
||||
}
|
||||
socket.send(JSON.stringify(msg))
|
||||
},
|
||||
sendWebSocket(msg){
|
||||
socket.send(JSON.stringify(msg))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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 ended (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'){
|
||||
//just for now, ik it's dirty
|
||||
element('messages').innerHTML +=
|
||||
`<div class="messageContainer" data-v-032da2b2="">
|
||||
<div class="message" data-v-032da2b2="">
|
||||
${msg.content.text}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
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))
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div>
|
||||
<div ref="msgContainer" id="messagesContainer" 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 />
|
||||
<topBanner />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import message from '@/components/message.vue';
|
||||
import messageReceive from '@/components/messageReceive.vue';
|
||||
import newMessage from '@/components/newMessage.vue';
|
||||
import topBanner from "@/components/topBanner";
|
||||
|
||||
export default {
|
||||
name: 'chat',
|
||||
components: {
|
||||
message,
|
||||
messageReceive,
|
||||
newMessage,
|
||||
topBanner
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.messagesContainer{
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
top: 3rem;
|
||||
height: calc(100% - 7rem);
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.messages{
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div id="login">
|
||||
<h1 class="title">open chat</h1>
|
||||
<div class="input-field" id="longurl">
|
||||
<label for="longurl-input"></label>
|
||||
<input v-model="session.content.user" class="input" id="longurl-input" type="text" autocomplete="off" maxlength="20" placeholder="chose nickname">
|
||||
</div>
|
||||
<input type="hidden" value="search" name="login">
|
||||
<textbtn text="login" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import textbtn from '@/components/textbtn';
|
||||
|
||||
export default {
|
||||
name: "login.vue",
|
||||
components: {
|
||||
textbtn
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
session: {
|
||||
type: "session",
|
||||
time: Date.now(),
|
||||
content: {
|
||||
user: ""
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#login{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
height: min-content;
|
||||
width: 100%;
|
||||
}
|
||||
input{
|
||||
padding: 0 2rem 0 2rem;
|
||||
height: 2.5rem;
|
||||
color: #fff;
|
||||
background-color: #1d1d1d;
|
||||
border-radius: 1.25rem;
|
||||
border: 1px solid #fff;
|
||||
text-align: center;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
input:focus{
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 35rem) {
|
||||
input {
|
||||
width: calc(100% - 8rem);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
runtimeCompiler: true
|
||||
}
|
||||
Loading…
Reference in New Issue