undefined room fix
parent
f39699479e
commit
d16d7153e3
File diff suppressed because it is too large
Load Diff
@ -1,81 +1,81 @@
|
|||||||
import Vue from 'vue'
|
import Vue from "vue"
|
||||||
import VueRouter from 'vue-router'
|
import VueRouter from "vue-router"
|
||||||
import App from './App.vue'
|
import App from "./App.vue"
|
||||||
import login from './views/login.vue'
|
import login from "./views/login.vue"
|
||||||
import chat from './views/chat.vue'
|
import chat from "./views/chat.vue"
|
||||||
import rooms from './views/rooms.vue'
|
import rooms from "./views/rooms.vue"
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
Vue.use(VueRouter)
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
const router = new VueRouter({
|
const router = new VueRouter({
|
||||||
routes: [
|
routes: [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: "/",
|
||||||
name: 'home',
|
name: "home",
|
||||||
component: login
|
component: login
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/login',
|
path: "/login",
|
||||||
name: 'login',
|
name: "login",
|
||||||
component: login
|
component: login
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/chat/*',
|
path: "/chat/*",
|
||||||
name: 'chat',
|
name: "chat",
|
||||||
component: chat
|
component: chat
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/rooms/*',
|
path: "/rooms/*",
|
||||||
name: 'room',
|
name: "room",
|
||||||
component: rooms
|
component: rooms
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/rooms',
|
path: "/rooms",
|
||||||
name: 'rooms',
|
name: "rooms",
|
||||||
component: rooms
|
component: rooms
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
let chatroom = {
|
let chatroom = {
|
||||||
name: "open chat",
|
name: "open chat",
|
||||||
user: [],
|
user: [],
|
||||||
username: "you",
|
username: "you",
|
||||||
messages: []
|
messages: []
|
||||||
};
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
chatroom: chatroom
|
chatroom: chatroom
|
||||||
}
|
}
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
error(msg){
|
|
||||||
show_error(msg)
|
|
||||||
},
|
},
|
||||||
router(route){router.push(route)}
|
methods: {
|
||||||
}
|
error(msg){
|
||||||
|
show_error(msg)
|
||||||
|
},
|
||||||
|
router(route){router.push(route)}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#app',
|
el: "#app",
|
||||||
router,
|
router,
|
||||||
template: '<App/>',
|
template: "<App/>",
|
||||||
components: {App},
|
components: {App},
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
chatroom: chatroom
|
chatroom: chatroom
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}).$mount("#app")
|
||||||
}).$mount('#app')
|
|
||||||
|
|
||||||
function element(id){ return document.getElementById(id)}
|
function element(id){ return document.getElementById(id)}
|
||||||
function show_error(msg) {
|
function show_error(msg) {
|
||||||
let error_style = element('errorBox').style
|
let error_style = element("errorBox").style
|
||||||
element('errorMessage').innerText = msg
|
element("errorMessage").innerText = msg
|
||||||
error_style.display = "block"
|
error_style.display = "block"
|
||||||
error_style.animation = "slide-from-left alternate 0.2s"
|
error_style.animation = "slide-from-left alternate 0.2s"
|
||||||
setTimeout(() => {error_style.animation = ""}, 200)
|
setTimeout(() => {error_style.animation = ""}, 200)
|
||||||
}
|
}
|
@ -1,159 +1,170 @@
|
|||||||
import matrix from 'matrix-js-sdk';
|
import matrix from 'matrix-js-sdk';
|
||||||
import main from '@/main.js';
|
import main from '@/main.js';
|
||||||
//import Vue from 'vue';
|
// import Vue from 'vue';
|
||||||
|
|
||||||
var matrix_cli = matrix.createClient({
|
const client = matrix.createClient({
|
||||||
baseUrl: "https://adb.sh",
|
baseUrl: 'https://adb.sh',
|
||||||
accessToken: getCookie("accessToken"),
|
accessToken: getCookie('accessToken'),
|
||||||
userId: getCookie("userId")
|
userId: getCookie('userId'),
|
||||||
})
|
});
|
||||||
let session = {
|
let session = {
|
||||||
user: "",
|
user: '',
|
||||||
password: "",
|
password: '',
|
||||||
accessToken: "",
|
accessToken: '',
|
||||||
rooms: [],
|
rooms: [],
|
||||||
currentRoom: undefined,
|
currentRoom: undefined,
|
||||||
login:{
|
login: {
|
||||||
user: "",
|
user: '',
|
||||||
password: ""
|
password: '',
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
console.log(document.cookie)
|
console.log(document.cookie);
|
||||||
|
|
||||||
if (getCookie("accessToken") && getCookie("userId")){
|
if (getCookie('accessToken') && getCookie('userId')) {
|
||||||
document.cookie = `expires=${ new Date(Date.now()+86400*10*1000)}`;
|
document.cookie = `expires=${new Date(Date.now() + 86400 * 10 * 1000)}`;
|
||||||
session = {
|
session = {
|
||||||
user: getCookie("userId"),
|
user: getCookie('userId'),
|
||||||
password: "",
|
password: '',
|
||||||
accessToken: getCookie("accessToken"),
|
accessToken: getCookie('accessToken'),
|
||||||
rooms: [],
|
rooms: [],
|
||||||
currentRoom: undefined
|
currentRoom: undefined,
|
||||||
};
|
};
|
||||||
//Vue.$router.push("/rooms/")
|
// Vue.$router.push("/rooms/")
|
||||||
window.location.href = '/#/rooms/';
|
window.location.href = '/#/rooms/';
|
||||||
matrix_cli.startClient();
|
client.startClient();
|
||||||
matrix_cli.once('sync', function (state){
|
client.once('sync', (state) => {
|
||||||
console.log(state)
|
console.log(state);
|
||||||
})
|
});
|
||||||
}
|
} else window.location.href = '/#/login';
|
||||||
else window.location.href = '/#/login';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data(){
|
data() {
|
||||||
return {
|
return {
|
||||||
session: session
|
session,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
login() {
|
||||||
|
if (session.accessToken !== '') {
|
||||||
|
main.methods.error('you are already logged in');
|
||||||
|
return;
|
||||||
|
} if (session.login.user === '') {
|
||||||
|
main.methods.error('username is empty');
|
||||||
|
return;
|
||||||
|
} if (session.login.password === '') {
|
||||||
|
main.methods.error('password is empty');
|
||||||
|
return;
|
||||||
|
} if (!(session.login.user.includes('@') && session.login.user.includes(':'))) {
|
||||||
|
main.methods.error('username is in wrong style');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
client.login('m.login.password', {
|
||||||
|
user: session.login.user,
|
||||||
|
password: session.login.password,
|
||||||
|
initial_device_display_name: 'matrix chat',
|
||||||
|
}).then((response) => {
|
||||||
|
document.cookie = `accessToken=${response.access_token}`;
|
||||||
|
document.cookie = `userId=${session.login.user}`;
|
||||||
|
document.cookie = `max-expires=${new Date(Date.now() + 86400 * 10 * 1000)}`;
|
||||||
|
session = {
|
||||||
|
user: session.login.user,
|
||||||
|
password: '',
|
||||||
|
accessToken: response.access_token,
|
||||||
|
rooms: [],
|
||||||
|
currentRoom: undefined,
|
||||||
|
};
|
||||||
|
console.log(`access token => ${response.access_token}`);
|
||||||
|
if (response.error) {
|
||||||
|
main.methods.error(response.error);
|
||||||
|
console.log(`login error => ${response.error}`);
|
||||||
}
|
}
|
||||||
|
window.location.href = '/#/rooms/';
|
||||||
|
client.startClient();
|
||||||
|
client.once('sync', (state) => {
|
||||||
|
console.log(state);
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
sendMessage(msg) {
|
||||||
login(){
|
const msgSend = {
|
||||||
if (session.accessToken !== ""){
|
type: msg.type,
|
||||||
main.methods.error("you are already logged in")
|
content: {
|
||||||
return;
|
body: msg.content.body,
|
||||||
} else if (session.login.user === ""){
|
msgtype: msg.content.msgtype,
|
||||||
main.methods.error('username is empty')
|
|
||||||
return;
|
|
||||||
} else if (session.login.password === ""){
|
|
||||||
main.methods.error('password is empty')
|
|
||||||
return;
|
|
||||||
} else if (!(session.login.user.includes("@") && session.login.user.includes(":"))){
|
|
||||||
main.methods.error('username is in wrong style')
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
matrix_cli.login("m.login.password", {
|
|
||||||
user: session.login.user,
|
|
||||||
password: session.login.password,
|
|
||||||
initial_device_display_name: "matrix chat",
|
|
||||||
}).then((response) => {
|
|
||||||
document.cookie = `accessToken=${response.access_token}`;
|
|
||||||
document.cookie = `userId=${session.login.user}`;
|
|
||||||
document.cookie = `max-expires=${ new Date(Date.now()+86400*10*1000)}`;
|
|
||||||
session = {
|
|
||||||
user: session.login.user,
|
|
||||||
password: "",
|
|
||||||
accessToken: response.access_token,
|
|
||||||
rooms: [],
|
|
||||||
currentRoom: undefined
|
|
||||||
};
|
|
||||||
console.log(`access token => ${response.access_token}`);
|
|
||||||
if (response.error){
|
|
||||||
main.methods.error(response.error)
|
|
||||||
console.log(`login error => ${response.error}`)
|
|
||||||
}
|
|
||||||
window.location.href = '/#/rooms/';
|
|
||||||
matrix_cli.startClient();
|
|
||||||
matrix_cli.once('sync', function (state){
|
|
||||||
console.log(state)
|
|
||||||
})
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
sendMessage(msg){
|
};
|
||||||
let msgSend = {
|
client.sendEvent(session.currentRoom.roomId, msgSend.type, msgSend.content, '').then(() => {
|
||||||
type: msg.type,
|
console.log('message sent successfully');
|
||||||
content: {
|
}).catch((err) => {
|
||||||
body: msg.content.body,
|
console.log(`error while sending message => ${err}`);
|
||||||
msgtype: msg.content.msgtype
|
main.methods.error('message could not be sent');
|
||||||
}
|
});
|
||||||
}
|
},
|
||||||
matrix_cli.sendEvent(session.currentRoom.roomId, msgSend.type, msgSend.content, "").then(()=>{
|
},
|
||||||
console.log("message sent successfully")
|
};
|
||||||
}).catch(err => {
|
|
||||||
console.log(`error while sending message => ${err}`)
|
|
||||||
main.methods.error("message could not be sent")
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getCookie(key) {
|
function getCookie(key) {
|
||||||
let cookie = document.cookie.replace(/ /g, '').split(';')
|
const cookie = document.cookie.replace(/ /g, '').split(';')
|
||||||
.find(cookie => cookie.split('=')[0] === key);
|
.find((cookie) => cookie.split('=')[0] === key);
|
||||||
return cookie?cookie.split('=')[1]:false;
|
return cookie ? cookie.split('=')[1] : false;
|
||||||
}
|
}
|
||||||
|
|
||||||
matrix_cli.on("event", event => {
|
client.on('event', (event) => {
|
||||||
console.log(event.getType());
|
console.log(event.getType());
|
||||||
console.log(event);
|
console.log(event);
|
||||||
if (event.getType() === "m.room.name") {
|
if (event.getType() === 'm.room.name') {
|
||||||
matrix_cli.getRooms().forEach(newRoom => {
|
client.getRooms().forEach((newRoom) => {
|
||||||
let room = session.rooms.find(room => room.roomId === newRoom.roomId)
|
const room = session.rooms.find((room) => room.roomId === newRoom.roomId);
|
||||||
if (!room) {
|
if (!room) {
|
||||||
session.rooms.push({name: newRoom.name, roomId: newRoom.roomId, messages: [], members: []})
|
session.rooms.push({
|
||||||
console.log(`new room => ${newRoom.name}`)
|
name: newRoom.name, roomId: newRoom.roomId, messages: [], members: [],
|
||||||
} else if (room.name !== newRoom.name) {
|
});
|
||||||
console.log(`roomname changed from ${room.name} to ${newRoom.name}`)
|
console.log(`new room => ${newRoom.name}`);
|
||||||
room.name = newRoom.name
|
} else if (room.name !== newRoom.name) {
|
||||||
}
|
console.log(`roomname changed from ${room.name} to ${newRoom.name}`);
|
||||||
})
|
room.name = newRoom.name;
|
||||||
}
|
}
|
||||||
else if (event.getType() === "m.room.member"){
|
});
|
||||||
let room = session.rooms.find(room => room.roomId === event.event.room_id)
|
} else if (event.getType() === 'm.room.member') {
|
||||||
if (!room) {
|
const room = session.rooms.find((room) => room.roomId === event.event.room_id);
|
||||||
session.rooms.push({name: "undefined", roomId: event.event.room_id, messages: [], members: []})
|
if (!room) {
|
||||||
console.log(`new user => ${event.event.sender}`)
|
session.rooms.push({
|
||||||
} else {
|
name: 'undefined', roomId: event.event.room_id, messages: [], members: [],
|
||||||
room.members.push({sender: event.event.sender, content: event.event.content})
|
});
|
||||||
}
|
console.log(`new user => ${event.event.sender}`);
|
||||||
|
} else {
|
||||||
|
room.members.push({ sender: event.event.sender, content: event.event.content });
|
||||||
}
|
}
|
||||||
console.log(session)
|
}
|
||||||
})
|
console.log(session);
|
||||||
|
});
|
||||||
|
|
||||||
matrix_cli.on("Room.timeline", event => {
|
client.on('Room.timeline', (event, room) => {
|
||||||
if (event.getType() === "m.room.message") {
|
if (event.getType() === 'm.room.message') {
|
||||||
console.log(`new message => ${event.event.content.body}`);
|
console.log(`message => ${event.event.content.body}`);
|
||||||
let room = session.rooms.find(room => room.roomId === event.event.room_id)
|
const thisRoom = session.rooms.find((thisRoom) => thisRoom.roomId === room.roomId);
|
||||||
if (!room) {
|
if (!thisRoom) {
|
||||||
session.rooms.push({name: "undefined", roomId: event.event.room_id, messages: [event.event], members: []})
|
session.rooms.push({
|
||||||
console.log(`undefined room name for => ${event.event.room_id}`)
|
name: room.name, roomId: event.event.room_id, messages: [event.event], members: [],
|
||||||
} else room.messages.push(event.event)
|
});
|
||||||
|
} else {
|
||||||
|
thisRoom.messages.push(event.event);
|
||||||
|
if (thisRoom.name === 'undefined') thisRoom.name = room.name;
|
||||||
|
}
|
||||||
|
|
||||||
let msgContainer = document.getElementById("messagesContainer")
|
const msgContainer = document.getElementById('messagesContainer');
|
||||||
if (session.currentRoom && session.currentRoom.roomId === event.event.room_id) {
|
if (session.currentRoom && session.currentRoom.roomId === room.roomId) {
|
||||||
if (event.event.sender === session.user || msgContainer.scrollHeight < msgContainer.scrollTop + 1000)
|
if (event.event.sender === session.user || msgContainer.scrollHeight < msgContainer.scrollTop + 1000) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
msgContainer.scrollTo(0, msgContainer.scrollHeight)
|
msgContainer.scrollTo(0, msgContainer.scrollHeight);
|
||||||
}, 10)
|
}, 10);
|
||||||
else document.getElementById("scrollDown").style.display = "block"
|
} else document.getElementById('scrollDown').style.display = 'block';
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
client.on('Room.member', (member) => {
|
||||||
|
console.log('this is a member');
|
||||||
|
console.log(member);
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue