receive and display messages

implement_matrix
adb 4 years ago
parent ee3ff30534
commit 8dbe826457

@ -1,5 +1,4 @@
import matrix from 'matrix-js-sdk'; import matrix from 'matrix-js-sdk';
//import Vue from 'vue'
import main from '@/main.js'; import main from '@/main.js';
const matrix_cli = matrix.createClient("https://adb.sh"); const matrix_cli = matrix.createClient("https://adb.sh");
@ -10,7 +9,6 @@ let session = {
rooms: [], rooms: [],
currentRoom: undefined currentRoom: undefined
}; };
let rooms = [];
export default { export default {
data(){ data(){
@ -27,6 +25,7 @@ export default {
}).then((response) => { }).then((response) => {
console.log(`access token => ${response.access_token}`); console.log(`access token => ${response.access_token}`);
session.access_token = response.access_token session.access_token = response.access_token
document.cookie = `access_token=${session.access_token}; user=${session.user};`;
if (response.error){ if (response.error){
main.methods.error(response.error) main.methods.error(response.error)
console.log(`login error => ${response.error}`) console.log(`login error => ${response.error}`)
@ -37,44 +36,49 @@ export default {
console.log(state) console.log(state)
}) })
}); });
/*let i=0;
let checkRooms = setInterval(()=>{
rooms = matrix_cli.getRooms()
console.log("asdasd"+rooms.length)
if (rooms.length !== 0 || i>10) clearInterval(checkRooms)
i++;
},500)*/
},
getRooms(){
rooms.push(matrix_cli.getRooms())
return rooms
}
} }
} }
/*new Vue({
el: '#roomList',
refs:{
rooms: [{name: "lol"},{name: "lol123"}]
},
data() {
return {
rooms: [{name: "lol"},{name: "lol123"}],
}
} }
})*/
matrix_cli.on("event", event => { matrix_cli.on("event", event => {
console.log(event.getType()); console.log(event.getType());
console.log(event); console.log(event);
session.rooms = [] matrix_cli.getRooms().forEach(newRoom => {
matrix_cli.getRooms().forEach(room => { let room = session.rooms.find(room => room.roomId === newRoom.roomId)
session.rooms.push({name: room.name, roomId: room.roomId}) if (!room){
session.rooms.push({name: newRoom.name, roomId: newRoom.roomId, messages: []})
console.log(`new room => ${newRoom.name}`)
}
else if (room.name !== newRoom.name){
console.log(`roomname changed from ${room.name} to ${newRoom.name}`)
room.name = newRoom.name
}
}) })
console.log(matrix_cli.getRooms()) console.log(session)
}) })
matrix_cli.on("Room.timeline", event => { matrix_cli.on("Room.timeline", event => {
if (event.getType() !== "m.room.message") return; if (event.getType() !== "m.room.message") return;
console.log(event.event.content.body); console.log(`new message => ${event.event.content.body}`);
let room = session.rooms.find(room => room.roomId === event.event.room_id)
if (!room){
session.rooms.push({name: "undefined", roomId: event.event.room_id, messages: [event.event]})
console.log(`undefined room name for => ${event.event.room_id}`)
}
else room.messages.push(event.event)
}); });
/*
if (getCookie("access_token")){
main.methods.router({path: "rooms/"})
}
else main.methods.router({path: "login"})
*/
/*function getCookie(key){
let cookies = document.cookie.split(';');
cookies.forEach(cookie => {
if (cookie.split('=')[0] === key)
return cookie.split('=')[1];
})
return false;
}*/

@ -2,14 +2,14 @@
<div> <div>
<div ref="msgContainer" id="messagesContainer" class="messagesContainer"> <div ref="msgContainer" id="messagesContainer" class="messagesContainer">
<div id="messages" class="messages"> <div id="messages" class="messages">
<p style="text-align: center; font-style: italic;">you entered the chat</p> <p v-if="session.currentRoom.messages.length === 0" class="emptyRoom">this room im empty</p>
<div v-for="(message, i) in chatroom.messages" :key="message.time"> <div v-for="(message, i) in session.currentRoom.messages" :key="message.origin_server_ts">
<div v-if="message.content.user !== chatroom.username && function(){ <div v-if="message.sender !== session.user && function(){
return i===0 || chatroom.messages[i-1].content.user!==message.content.user;}()" return i===0 || session.currentRoom.messages[i-1].sender!==message.sender;}()"
style="margin-left: 2rem; margin-top: 1rem">{{message.content.user}} style="margin-left: 2rem; margin-top: 1rem">{{message.sender}}
</div> </div>
<messageReceive v-if="message.content.user !== chatroom.username" :msg=message.content.text /> <messageReceive v-if="message.sender !== session.user" :msg=message.content.body />
<message v-if="message.content.user === chatroom.username" :msg=message.content.text /> <message v-if="message.sender === session.user" :msg=message.content.body />
</div> </div>
</div> </div>
</div> </div>
@ -50,7 +50,7 @@ export default {
data(){ data(){
return { return {
chatroom: main.data().chatroom, chatroom: main.data().chatroom,
sesssion: matrix.data().session session: matrix.data().session
} }
} }
} }
@ -78,4 +78,8 @@ export default {
right: 1rem; right: 1rem;
display: none; display: none;
} }
.emptyRoom{
text-align: center;
font-style: italic;
}
</style> </style>

Loading…
Cancel
Save