می خواهم این کد را توسعه بدهم، به شکلی که پیام های ارسالی و دریافتی به صورت مشخص داخل دیتابیسی فایل json ذخیره شود و هنگامی که صفحه مرورگز طرفین Refresh شد، این اطلاعات از همان json واکشی و به شکل اولیه نمایش داده شود با همان استایل و شکل مثل تلگرام که چت انجام میشود و اطلاعات باقی می ماند

تغییرات را تکمیل کن کد را کامل شده برای من ارسال کن


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

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>