در کنار صفحۀ چت من یک navigation ستونی برای قرار گرفتن پروفایل کلاینت یا سروری که پیام میدهد باشد
مانند تلگرام که سمت چپ آن لیستی از 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.88.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.88.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;
 }
 #chat {
 width: 100%;
 height: 300px;
 border: 1px solid #000;
 overflow-y: auto;
 margin-bottom: 10px;
 padding: 10px;
 background-color: #f1f1f1;
 }
 .message {
 padding: 10px;
 margin: 5px;
 border-radius: 5px;
 max-width: 60%;
 clear: both;
 }
 .sent {
 background-color: #dcf8c6;
 float: right;
 }
 .received {
 background-color: #fff;
 float: left;
 }
 #messageInput {
 width: 80%;
 }
 button {
 width: 18%;
 }
 </style>
</head>
<body>
 <h2>WebSocket Chat</h2>
 <div id="chat"></div>
 <input type="text" id="messageInput" placeholder="Type a message..." />
 <button onclick="sendMessage()">Send</button>

 <script>
 const chatDiv = document.getElementById("chat");
 const messageInput = document.getElementById("messageInput");

 // ایجاد اتصال به سرور WebSocket
 const socket = new WebSocket("ws://192.168.88.240:8765"); // آدرس IP سرور لینوکس

 const clientId = Math.random().toString(36).substring(2, 15); // تولید یک ID منحصر‌به‌فرد برای هر کلاینت

 // مدیریت اتصال به سرور
 socket.onopen = function(event) {
 chatDiv.innerHTML += "<p><em>Connected to the server</em></p>";
 };

 // دریافت پیام از سرور
 socket.onmessage = function(event) {
 const data = JSON.parse(event.data); // پیام دریافتی از سرور را به صورت JSON بررسی می‌کنیم

 // بررسی اینکه آیا پیام از طرف خودمان است یا از طرف شخص مقابل
 if (data.clientId !== clientId) {
 displayMessage(data.message, 'received'); // پیام‌های طرف مقابل در سمت چپ نمایش داده می‌شوند
 }
 };

 // ارسال پیام به سرور
 function sendMessage() {
 const message = messageInput.value;
 if (message) {
 const data = {
 clientId: clientId, // شناسه کلاینت خود را به پیام اضافه می‌کنیم
 message: message
 };
 
 // ارسال پیام به سرور
 socket.send(JSON.stringify(data));

 // نمایش پیام ارسال‌شده در سمت راست
 displayMessage(message, 'sent');

 // پاک کردن ورودی
 messageInput.value = "";
 }
 }

 // نمایش پیام در صفحه چت
 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>