می خواهم در قسمت سمت چپ در نوار Contact بجای اینکه با پیام دادن شروع کنیم پروفایل ایجاد شود و چت کنیم
به طور خودکار در همان ابتدا هر سرور یا هر کلاینتی در شبکه یافت می شود در کنار صفحه به ما به عنوان شخصی که آماده برای چت است نمایش داده شود ، هر کتابخانه یا ویژگی که قرار است بهترین باشد برای این کار برای من انجام بدهید


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.85.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.85.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.85.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>