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 Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
|
import login from './views/login.vue'
|
||||||
|
import chat from './views/chat.vue'
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
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({
|
new Vue({
|
||||||
render: h => h(App),
|
el: '#app',
|
||||||
|
router,
|
||||||
|
template: '<App/>',
|
||||||
|
components: {App}
|
||||||
}).$mount('#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