Add files via upload

BaseMax · web-flow · commit 0f712876fe9e · 2023-09-24T05:48:42.000+01:00
diff --git a/client.css b/client.css
@@ -0,0 +1,48 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #f5f5f5;
+}
+
+h1 {
+  text-align: center;
+  color: #333;
+}
+
+#messageList {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  max-height: 300px;
+  overflow-y: scroll;
+  border: 1px solid #ccc;
+  background-color: #fff;
+}
+
+#messageList li {
+  margin: 5px 0;
+  padding: 5px;
+  background-color: #f0f0f0;
+  border-radius: 5px;
+}
+
+#messageInput {
+  width: 70%;
+  padding: 5px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+button {
+  padding: 5px 10px;
+  background-color: #007BFF;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
diff --git a/client.html b/client.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WebSocket Chat</title>
+  <link rel="stylesheet" href="client.css">
+</head>
+<body>
+  <h1>WebSocket Chat</h1>
+  <ul id="messageList"></ul>
+  <input type="text" id="messageInput" placeholder="Type your message">
+  <button onclick="sendMessage()">Send</button>
+
+  <script src="client.js"></script>
+</body>
+</html>
diff --git a/client.js b/client.js
@@ -0,0 +1,51 @@
+const socket = new WebSocket('ws://localhost:8080');
+
+const messageList = document.getElementById('messageList');
+const messageInput = document.getElementById('messageInput');
+
+socket.addEventListener('open', (event) => {
+  console.log('Connected to WebSocket server');
+});
+
+socket.addEventListener('message', (event) => {
+  console.log(`Received from server: ${event.data}`);
+
+  appendToList(event.data);
+});
+
+socket.addEventListener('close', (event) => {
+  if (event.wasClean) {
+    console.log('Connection closed cleanly');
+  } else {
+    console.error('Connection abruptly closed');
+  }
+});
+
+socket.addEventListener('error', (event) => {
+  console.error('WebSocket error:', event);
+});
+
+function appendToList(message) {
+  const listItem = document.createElement('li');
+  listItem.textContent = message;
+
+  messageList.appendChild(listItem);
+
+  messageList.scrollTop = messageList.scrollHeight;
+}
+
+function sendMessage() {
+  const message = messageInput.value;
+  socket.send(message);
+
+  messageInput.value = '';
+
+  appendToList(message);
+}
+
+messageInput.addEventListener('keydown', (event) => {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    sendMessage();
+  }
+});
diff --git a/server.js b/server.js
@@ -0,0 +1,31 @@
+const http = require('http');
+const WebSocket = require('ws');
+
+const server = http.createServer((req, res) => {
+  res.writeHead(200, { 'Content-Type': 'text/plain' });
+  res.end('WebSocket Server Running');
+});
+
+const wss = new WebSocket.Server({ server });
+
+wss.on('connection', (ws) => {
+  console.log('Client connected');
+
+  ws.on('message', (message) => {
+    console.log(`Received: ${message}`);
+    
+    wss.clients.forEach((client) => {
+      if (client !== ws && client.readyState === WebSocket.OPEN) {
+        client.send(message);
+      }
+    });
+  });
+
+  ws.on('close', () => {
+    console.log('Client disconnected');
+  });
+});
+
+server.listen(8080, () => {
+  console.log('Server listening on http://localhost:8080');
+});
