работающий веб сокет + отображение ответа сообщения
This commit is contained in:
parent
3522ee8e5c
commit
6c2bbb9431
2 changed files with 98 additions and 24 deletions
|
|
@ -68,31 +68,19 @@
|
|||
|
||||
export default function createWebSocket(url, token, onMessageCallback) {
|
||||
token = token.split(" ")[1]
|
||||
console.log(token)
|
||||
const socket = new WebSocket(url, [token])
|
||||
|
||||
socket.addEventListener('message', (event) => {
|
||||
const jsonData = JSON.parse(event.data);
|
||||
onMessageCallback(jsonData);
|
||||
//console.log(jsonData)
|
||||
//console.log(jsonData)S
|
||||
});
|
||||
|
||||
socket.onopen = (event) => {
|
||||
console.log('WebSocket is open now.');
|
||||
};
|
||||
|
||||
socket.onmessage = (event) => {
|
||||
console.log('Message from server:', event.data);
|
||||
|
||||
};
|
||||
|
||||
socket.addEventListener('close', (event) => {
|
||||
if (event.code !== 1000) {
|
||||
console.error(`WebSocket closed unexpectedly: ${event.reason} (Code: ${event.code})`);
|
||||
} else {
|
||||
console.log('WebSocket closed normally');
|
||||
}
|
||||
});
|
||||
|
||||
socket.addEventListener('close', (event) =>{
|
||||
console.log(event)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -30,6 +30,11 @@
|
|||
let pinnedMsg = []
|
||||
let chatId = null
|
||||
let scrollableDiv;
|
||||
let answerMessageTextShow = false
|
||||
let answerMessageImgShow = false
|
||||
|
||||
let answerMessage = ""
|
||||
let answerMessageImg = ""
|
||||
|
||||
onMount(async () => {
|
||||
|
||||
|
|
@ -93,10 +98,11 @@
|
|||
async function sendMessage() {
|
||||
|
||||
let image = null
|
||||
if(messageText != ""){
|
||||
if(image_url != null){
|
||||
if(image_url != null)
|
||||
image = await uploadImages(image_url)
|
||||
}
|
||||
|
||||
if((messageText != "") || image != null){
|
||||
|
||||
console.log(image)
|
||||
|
||||
socket.send(JSON.stringify({flag: flag,
|
||||
|
|
@ -108,6 +114,10 @@
|
|||
imageShow = false
|
||||
image_url = null
|
||||
answer = null
|
||||
answerMessageTextShow = false
|
||||
answerMessageImgShow = false
|
||||
answerMessage = ""
|
||||
answerMessageImg = ""
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -146,12 +156,19 @@ let y ;
|
|||
let showDiv = false;
|
||||
let helperDiv
|
||||
let pickedId
|
||||
let PickedText = ""
|
||||
let PickedImg = ""
|
||||
let PickedName = ""
|
||||
$: console.log(pickedId)
|
||||
$: console.log(answer)
|
||||
$: console.log(answerMessage)
|
||||
|
||||
function helperDivShow(event, id) {
|
||||
function helperDivShow(event, id, text, img, username) {
|
||||
event.preventDefault();
|
||||
|
||||
PickedText = text
|
||||
PickedImg = img
|
||||
PickedName = username
|
||||
pickedId = id
|
||||
//showDiv = !showDiv;
|
||||
helperDiv = document.getElementById("helperDiv");
|
||||
|
|
@ -175,8 +192,17 @@ function helperDivShow(event, id) {
|
|||
}
|
||||
|
||||
function ansFunc(){
|
||||
console.log("ansFunc");
|
||||
|
||||
answerMessage = PickedText
|
||||
answerMessageImg = PickedImg
|
||||
|
||||
console.log(answerMessage, answerMessageImg)
|
||||
answer = pickedId
|
||||
if(answerMessage != "")
|
||||
answerMessageTextShow = true
|
||||
if(answerMessageImg != null)
|
||||
answerMessageImgShow = true
|
||||
console.log(answerMessageTextShow, answerMessageImgShow)
|
||||
}
|
||||
|
||||
async function pinFunc(event){
|
||||
|
|
@ -256,6 +282,13 @@ function helperDivShow(event, id) {
|
|||
image_url = null
|
||||
}
|
||||
|
||||
function deleteAnswer(){
|
||||
answerMessageTextShow = false
|
||||
answerMessageImgShow = false
|
||||
answerMessageImg = ""
|
||||
answerMessage = ""
|
||||
}
|
||||
|
||||
async function handleScroll(event) {
|
||||
const { scrollTop, scrollHeight, clientHeight } = event.target
|
||||
console.log(scrollHeight, ";" )
|
||||
|
|
@ -334,7 +367,7 @@ function helperDivShow(event, id) {
|
|||
<img class="messageAvatar" src="{message.avatar_image}" alt="ава">
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div class="messageDiv" on:contextmenu={helperDivShow(event,message.id)}>
|
||||
<div class="messageDiv" on:contextmenu={helperDivShow(event,message.id, message.message, message.image_url, message.username)}>
|
||||
|
||||
<div class="nameAnswerDiv">
|
||||
<h3>{message.username}</h3>
|
||||
|
|
@ -360,6 +393,21 @@ function helperDivShow(event, id) {
|
|||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<div class="inputDiv">
|
||||
|
||||
{#if (answerMessageTextShow == true) || (answerMessageImgShow == true)}
|
||||
<div class="answerMessageDiv">
|
||||
{#if answerMessageImgShow == true}
|
||||
<img class="answerMessageImg" src="{answerMessageImg}" alt="">
|
||||
{/if}
|
||||
<div class="answerTextDiv">
|
||||
{#if answerMessageTextShow == true}
|
||||
<div class="answerBlockDiv"><h4 class="answerMessage">{answerMessage}</h4></div>
|
||||
{/if}
|
||||
<div class="answerBlockDiv"><h4 class="answerMessageName">{PickedName}</h4></div>
|
||||
</div>
|
||||
<button on:click={deleteAnswer} class="deleteAnswer">x</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if imageShow == true}
|
||||
<div class="imageDiv">
|
||||
<img src="{imageFile}" alt="" class="imageFile">
|
||||
|
|
@ -379,7 +427,7 @@ function helperDivShow(event, id) {
|
|||
|
||||
</div>
|
||||
|
||||
<input type="file" accept=".png, .jpeg, .jpg" id="fileInput"
|
||||
<input type="file" accept="image/*" id="fileInput"
|
||||
on:change={handleFileChange} style="display: none;">
|
||||
|
||||
</div>
|
||||
|
|
@ -402,7 +450,8 @@ function helperDivShow(event, id) {
|
|||
<div class="pinAvatar"><img class="pinnedImg" src="{msg.avatar_image}" alt=""></div>
|
||||
<div class="pinMsg">
|
||||
<h3 class="pinnedMsg">{msg.message}</h3>
|
||||
<img src="{msg.image_url}" class="pinImg" alt=""></div>
|
||||
<img src="{msg.image_url}" class="pinImg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
@ -432,6 +481,43 @@ function helperDivShow(event, id) {
|
|||
width: 3px;
|
||||
}
|
||||
|
||||
.deleteAnswer{
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
|
||||
.answerBlockDiv{
|
||||
padding-left:5px;
|
||||
width: 80%;
|
||||
height: 50%;
|
||||
//outline: 1px solid white;
|
||||
}
|
||||
|
||||
.answerTextDiv{
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.answerMessageName{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.answerMessageImg{
|
||||
height: 3rem;
|
||||
padding: 0px 0 5px 0;
|
||||
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.answerMessageDiv{
|
||||
display: flex;
|
||||
padding: 3px 0 0 5px;
|
||||
//background: red;
|
||||
border-bottom: 1px solid rgba($color: #ffffff, $alpha: 0.10727) ;
|
||||
//background-color: red;
|
||||
}
|
||||
|
||||
.imageDiv{
|
||||
position: relative;
|
||||
padding-top: 5px;
|
||||
|
|
@ -760,7 +846,7 @@ height: 100%;
|
|||
height: 100%;
|
||||
}
|
||||
.grid > *{
|
||||
outline: 1px solid white;
|
||||
//outline: 1px solid white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue