aheh/ChessServer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into 'master'

Browse Source 
feat: display name who sent message

See merge request aiursoft/chessserver!60
This commit is contained in:
Anduin Xue
2024-06-23 14:17:27 +00:00
parent 1e6eaea80f 8fa8544d7b
commit 9bc8fb4701
3 changed files with 94 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Aiursoft.ChessServer/Views/Shared/Components/Chat/Default.cshtml
+15 -11
View File
@@ -1,9 +1,7 @@
@model Aiursoft.ChessServer.Views.Shared.Components.Chat.ChatModel
<div id="chat" class="w-100">
<div class="container overflow-y-scroll scrollbar-width-none aspect-1-1" id="messages-box">
</div>
<div class="container overflow-y-scroll scrollbar-width-none aspect-1-1" id="messages-box"></div>
<form class="input-group input-group-sm my-2" id="chatSendForm">
<input type="text" class="form-control" id="inputMessage" placeholder="type message, enter to send" />
@@ -17,10 +15,13 @@
<template id="messageFromOpponent">
<div class="row justify-content-start">
<div class="toast align-items-center bg-white text-dark my-1 opacity-1 flex-basis-auto"
aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body" data-message><!-- MESSAGE HERE--></div>
<div class="d-flex flex-column align-items-start">
<div class="text-sm" data-message-from=""><!-- MESSAGE FROM WHO --></div>
<div class="toast align-items-center bg-white text-dark my-1 opacity-1 flex-basis-auto"
aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body" data-message><!-- MESSAGE HERE--></div>
</div>
</div>
</div>
</div>
@@ -28,10 +29,13 @@
<template id="messageFromMe">
<div class="row justify-content-end">
<div class="toast align-items-center bg-primary text-white my-1 opacity-1 flex-basis-auto"
aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body" data-message><!-- MESSAGE HERE--></div>
<div class="d-flex flex-column align-items-end">
<div class="text-sm" data-message-from=""><!-- MESSAGE FROM WHO --></div>
<div class="toast align-items-center bg-primary text-white my-1 opacity-1 flex-basis-auto"
aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body" data-message><!-- MESSAGE HERE--></div>
</div>
</div>
</div>
</div>
src/Aiursoft.ChessServer/wwwroot/css/custom.css
+4
View File
@@ -18,3 +18,7 @@
scrollbar-width: none;
-ms-overflow-style: none;
}
.text-sm {
font-size: 0.7rem;
}
src/Aiursoft.ChessServer/wwwroot/scripts/chat.js
+75 -55
View File
@@ -1,64 +1,84 @@
const initChat = function (playerId, gameId) {
const messagesBox = document.getElementById('messages-box');
const inputMessage = document.getElementById('inputMessage');
const chatSendForm = document.getElementById('chatSendForm');
const wsScheme = window.location.protocol === "https:" ? "wss://" : "ws://";
const socket = new WebSocket(
`${wsScheme}${window.location.host}/chats/${gameId}.ws?playerId=${playerId}`
);
chatSendForm.onsubmit = function sendNewMessage(e) {
e.preventDefault();
let msg = inputMessage.value;
const messagesBox = document.getElementById("messages-box");
const inputMessage = document.getElementById("inputMessage");
const chatSendForm = document.getElementById("chatSendForm");
const wsScheme = window.location.protocol === "https:" ? "wss://" : "ws://";
const socket = new WebSocket(
`${wsScheme}${window.location.host}/chats/${gameId}.ws?playerId=${playerId}`
);
if (msg.trim() === '') {
return;
}
chatSendForm.onsubmit = function sendNewMessage(e) {
e.preventDefault();
let msg = inputMessage.value;
socket.send(msg);
inputMessage.value = '';
if (msg.trim() === "") {
return;
}
function scrollToNewestMessage() {
messagesBox.scrollTo({top: messagesBox.scrollHeight, behavior: 'smooth'});
socket.send(msg);
inputMessage.value = "";
};
function scrollToNewestMessage() {
messagesBox.scrollTo({ top: messagesBox.scrollHeight, behavior: "smooth" });
}
function appendMyNewMessage(message, senderNickname) {
let template = document.getElementById("messageFromMe");
appendNewMessage(message, senderNickname, template);
scrollToNewestMessage();
}
function appendOpponentNewMessage(message, senderNickname) {
let template = document.getElementById("messageFromOpponent");
appendNewMessage(message, senderNickname, template);
scrollToNewestMessage();
}
function appendNewMessage(message, senderNickname, template) {
let t = template.content;
let txt = t.querySelector("[data-message]");
txt.textContent = message;
let nickname = t.querySelector("[data-message-from]");
nickname.setAttribute("data-message-from", senderNickname);
const lastSender =
messagesBox.lastElementChild && messagesBox.lastElementChild.querySelector
? messagesBox.lastElementChild
.querySelector("[data-message-from]")
.getAttribute("data-message-from")
: "";
nickname.textContent = lastSender === senderNickname ? "" : senderNickname;
let clone = document.importNode(t, true);
messagesBox.appendChild(clone);
}
socket.onmessage = function (event) {
// event.data may be:
// {"Content":"zxczc","SenderNickName":"Anonymous 1431","IsMe":true}
const serverMessage = JSON.parse(event.data);
if (serverMessage.IsMe) {
appendMyNewMessage(serverMessage.Content, serverMessage.SenderNickName);
} else {
appendOpponentNewMessage(
serverMessage.Content,
serverMessage.SenderNickName
);
}
};
function appendMyNewMessage(message) {
let t = document.getElementById('messageFromMe').content;
let txt = t.querySelector("[data-message]");
txt.textContent = message;
let clone = document.importNode(t, true);
messagesBox.appendChild(clone);
scrollToNewestMessage();
}
function appendOpponentNewMessage(message) {
let t = document.getElementById('messageFromOpponent').content;
let txt = t.querySelector("[data-message]");
txt.textContent = message;
let clone = document.importNode(t, true);
messagesBox.appendChild(clone);
scrollToNewestMessage();
}
socket.onmessage = function (event) {
// event.data may be:
// {"Content":"zxczc","SenderNickName":"Anonymous 1431","IsMe":true}
const serverMessage = JSON.parse(event.data);
if (serverMessage.IsMe) {
appendMyNewMessage(serverMessage.Content);
} else {
appendOpponentNewMessage(serverMessage.Content);
}
};
socket.onclose = function () {
setTimeout(function () {
initChat(playerId, gameId);
}, 1000);
};
}
socket.onclose = function () {
setTimeout(function () {
initChat(playerId, gameId);
}, 1000);
};
};
export default initChat;