کنار صفحه چت من یک بخش Notification قرار بده که هر کلاینتی که پیامش را ارسال نمود، یا هر سروری که پیامش را ارسال نمود، یک پروفایل واحد تشکیل شود (مانند تلگرام و آیدی) و بتوان با آن شخص چت نمود


بهتر است یک باکس قرار داده شود که ما از طریق آی پی مثلا آی پی ویندوز کلاینت با آن ارتباط برقرار نموده و پروفایل (صفحه چت) آن باز شود و بتوانیم با آن شخص (IP) چت کنیم


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>