You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
matrix-chat/src/main.js

107 lines
2.2 KiB
JavaScript

4 years ago
import Vue from 'vue'
import VueRouter from 'vue-router'
4 years ago
import App from './App.vue'
import login from './views/login.vue'
import chat from './views/chat.vue'
4 years ago
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
}
]
})
4 years ago
new Vue({
el: '#app',
router,
template: '<App/>',
components: {App}
4 years ago
}).$mount('#app')
4 years ago
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))
4 years ago
}
}
}
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)')
4 years ago
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>`;
4 years ago
}
}
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))
}