یک دیتابیس پیشرفته با json میخواهم برای چت ایجاد کنیم که وضعیت کلی چت را در خودش ذخیره کند
اینکه چه کسی پیام را ارسال کرده با استایل خاص خودش
چه کسی دریافت کرده با استایل خاص خودش
جه زمانی بوده با چه آیدی بوده و غیره

که بتوان چت را مثل حالت اول ذخیره نمود و هر موقع خواستیم آن چت را در صفحۀ چت پروفایل شخص مورد نظر مشاهده کنیم در chat.html


code Server (Linux):

import asyncio
import websockets
import ssl

connected_clients = set()

async def handle_client(websocket, path):
 # اضافه کردن کلاینت به لیست کلاینت‌های متصل
 connected_clients.add(websocket)
 try:
 async for message in websocket:
 # وقتی پیامی دریافت می‌شود، آن را به همه کلاینت‌ها ارسال می‌کنیم
 print(f"Received message: {message}")
 await broadcast(message)
 finally:
 # حذف کلاینت در صورت قطع ارتباط
 connected_clients.remove(websocket)

async def broadcast(message):
 if connected_clients: # اگر کلاینتی متصل است
 await asyncio.wait([client.send(message) for client in connected_clients])

 # تنظیمات SSL
ssl_context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER)
ssl_context.load_cert_chain(certfile="server.pem", keyfile="server.pem")

start_server = websockets.serve(handle_client, "192.168.59.240", 8765)

asyncio.get_event_loop().run_until_complete(start_server)
print("Server started, waiting for clients...")
asyncio.get_event_loop().run_forever()



--------------------------------

Code Client (Windows):

import asyncio
import websockets
import ssl

async def chat_client():
 uri = "ws://192.168.59.240:8765" # آدرس IP سرور لینوکس را به‌درستی وارد کنید

 async with websockets.connect(uri) as websocket:
 print("Connected to the server.")
 
 # دریافت پیام آمادگی از سرور
 message = await websocket.recv()
 print(f"Server: {message}")

 # حلقه برای ارسال و دریافت پیام‌های چت
 while True:
 # دریافت پیام از کاربر
 msg = input("Enter message to send: ")
 
 # ارسال پیام به سرور
 await websocket.send(msg)

 # دریافت و نمایش پیام از سرور
 response = await websocket.recv()
 print(f"Server: {response}")

# اجرای کلاینت
asyncio.get_event_loop().run_until_complete(chat_client())


-------------------------


Chat web (html) for both:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Chat App</title>
 <style>
 body {
 font-family: Arial, sans-serif;
 display: flex;
 margin: 0;
 }
 #sidebar {
 width: 25%;
 height: 100vh;
 border-right: 1px solid #ddd;
 padding: 10px;
 background-color: #f9f9f9;
 overflow-y: auto;
 box-sizing: border-box;
 }
 #sidebar h3 {
 margin-bottom: 20px;
 font-size: 1.5em;
 color: #333;
 }
 #contacts {
 list-style-type: none;
 padding: 0;
 }
 #contacts li {
 display: flex;
 align-items: center;
 padding: 10px;
 margin-bottom: 5px;
 background-color: #fff;
 border-radius: 8px;
 cursor: pointer;
 transition: background-color 0.3s, transform 0.2s;
 }
 #contacts li:hover {
 background-color: #e2e2e2;
 transform: translateX(5px);
 }
 .status {
 position: relative;
 width: 10px;
 height: 10px;
 background-color: #00ff00;
 border-radius: 50%;
 margin-right: 10px;
 animation: pulse 1.5s infinite;
 }
 @keyframes pulse {
 0% {
 transform: scale(1);
 box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7);
 }
 70% {
 transform: scale(1.5);
 box-shadow: 0 0 10px 10px rgba(0, 255, 0, 0);
 }
 100% {
 transform: scale(1);
 box-shadow: 0 0 0 0 rgba(0, 255, 0, 0);
 }
 }
 #chat-container {
 width: 75%;
 padding: 20px;
 box-sizing: border-box;
 background-color: #f7f7f7;
 }
 #chat {
 width: 100%;
 height: 300px;
 border: 1px solid #ddd;
 overflow-y: auto;
 margin-bottom: 10px;
 background-color: #fff;
 padding: 10px;
 border-radius: 8px;
 }
 .message {
 padding: 10px;
 margin: 5px 0;
 border-radius: 5px;
 max-width: 60%;
 clear: both;
 }
 .sent {
 background-color: #e0f7e9;
 border: 1px solid #a3e4c0;
 float: right;
 }
 .received {
 background-color: #e0e7ff;
 border: 1px solid #a3c8e0;
 float: left;
 }
 #messageInput {
 width: 80%;
 padding: 10px;
 border-radius: 4px;
 border: 1px solid #ddd;
 }
 button {
 width: 18%;
 padding: 10px;
 border-radius: 4px;
 border: none;
 background-color: #007bff;
 color: white;
 cursor: pointer;
 transition: background-color 0.3s;
 }
 button:hover {
 background-color: #0056b3;
 }
 </style>
</head>
<body>
 <div id="sidebar">
 <h3>Contacts</h3>
 <ul id="contacts">
 <!-- لیست مخاطبان در اینجا اضافه خواهد شد -->
 </ul>
 </div>

 <div id="chat-container">
 <h2>WebSocket Chat</h2>
 <div id="chat"></div>
 <input type="text" id="messageInput" placeholder="Type a message..." />
 <button onclick="sendMessage()">Send</button>
 </div>

 <script>
 const chatDiv = document.getElementById("chat");
 const messageInput = document.getElementById("messageInput");
 const contactsList = document.getElementById("contacts");

 // ایجاد اتصال به سرور WebSocket
 const socket = new WebSocket("ws://192.168.59.240:8765");

 const clientId = Math.random().toString(36).substring(2, 15);
 let connectedClientId = null;

 // مدیریت اتصال به سرور
 socket.onopen = function(event) {
 chatDiv.innerHTML += "<p><em>Connected to the server</em></p>";
 };

 // دریافت پیام از سرور
 socket.onmessage = function(event) {
 const data = JSON.parse(event.data);

 if (data.clientId !== clientId) {
 displayMessage(data.message, 'received');

 if (!connectedClientId) {
 connectedClientId = data.clientId;
 addContact(connectedClientId);
 }
 }
 };

 // ارسال پیام به سرور
 function sendMessage() {
 const message = messageInput.value;
 if (message) {
 const data = {
 clientId: clientId,
 message: message
 };

 socket.send(JSON.stringify(data));

 displayMessage(message, 'sent');

 if (!connectedClientId) {
 connectedClientId = clientId;
 addContact(connectedClientId);
 }

 messageInput.value = "";
 }
 }

 messageInput.addEventListener('keydown', function(event) {
 if (event.key === 'Enter') {
 sendMessage();
 }
 });

 function addContact(clientId) {
 if (!document.getElementById(`contact-${clientId}`)) {
 const listItem = document.createElement('li');
 listItem.id = `contact-${clientId}`;
 listItem.innerHTML = `<span class="status"></span>Client: ${clientId}`;
 contactsList.appendChild(listItem);
 }
 }

 function displayMessage(message, type) {
 const messageElem = document.createElement('div');
 messageElem.className = 'message ' + type;
 messageElem.innerText = message;
 chatDiv.appendChild(messageElem);
 chatDiv.scrollTop = chatDiv.scrollHeight;
 }
 </script>
</body>
</html>