Приветствую. Есть простой вопрос, но он мешает продвинуться дальше в работе над приложением. Делаю в рамках обучения групповой чат с комнатами на webrtc.
Смысл такой. Есть 2 переменных в вакууме.
// ид пользователя, просто string переменная
var userId = "";
// переменная для хранения списка комнат, к которым можно подключиться
var roomsList = [];
Далее есть код для общения с сервером по api с ассинхроном и коллбеками, например:
serverConnect({
serverUrl: "ws://127.0.0.1:0001",
success(plugin) {
plugin.connect({
success() {
userId = generateUserIdString();
plugin.send({"message": "getRoomsList"});
},
onmessage(msg) {
if(msg.type == "gotRoomsList") {
roomsList = msg.roomsList;
}
},
});
},
});
И есть код Vue и html, который отвечает за интерфейс.
var app = Vue.createApp({
data() {
return {
userId: "",
roomsList: [],
};
},
}).mount("#app");
<div id="app">
<div>{{ userId }}</div>
<div>
<ul>
<li v-for="room in roomsList">{{ room.name }}</li>
</ul>
</div>
</div>
И, собственно, вопрос как организовать эти части так, чтобы переменные userId и roomsList можно было обновлять как из интерфейса так и из кода?
Простой