{"name":"Reverse Engineer the Web 5","description":"Client-Server relationship; chatbot!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/efzbltzllpinbcmo1ogf","view_count":8,"fork_count":0,"expires_at":null,"created_at":"2025-04-21T17:05:15.872242Z","updated_at":"2025-04-21T17:05:15.872243Z","user_id":60,"status":"PUBLIC","parent_id":null,"id":1494,"user":{"username":"2718281828459045","id":60,"password_hash":"$2b$12$ZpelZmCi5wEA/VuXSdOJXeylQ6vOUks0sfwQxIKdjwBAeamaWIMOW","updated_at":"2024-02-26T18:31:54.473218Z","reset_token_expiry":null,"subscription_status":"active","photo":null,"email":"jacob@jippity.pro","recess_id":"34481dd2-2bdf-14f9-99da-131de59dc90f","created_at":"2024-02-26T18:31:54.473216Z","reset_token":null,"stripe_customer_id":"cus_RPbovGjLueUufv","seats":100},"code":{"client.js":"///////////CLIENT.JS//////\n//Check the auth button. Is the password correct?\ndocument.getElementById('authButton').addEventListener('click', () => {\n const password = document.getElementById('passwordInput').value;\n ws.send(JSON.stringify({ type: 'authenticate', password }));\n});\n\n\n// An IP address is a computer's online ID. In this case, the server's.\n\n////////////////////////////////////\n// YOU NEED TO PUT THE RIGHT IP HERE!\nconst serverIp = '76.82.105.51';\n////////////////////////////////////\n\n//The WebSocket API makes it pretty easy to set up a Network and Ports\n//\"3000\" refers to a port -- a place through which information flows.\nconst ws = new WebSocket(`wss://${serverIp}:3000`);\n\n//We use the API to handle different types of events.\nws.onopen = () => {\n console.log(\"WebSocket connection established\");\n};\n\nws.onerror = (error) => {\n console.error(\"WebSocket error:\", error);\n alert(\"Can't connect to the server. Boo hoo.\");\n};\n\nws.onclose = () => {\n console.log(\"WebSocket connection closed\");\n alert(\"Server connection closed. Sorry!\");\n};\n\n//This is the main function that handles sending messages.\nws.onmessage = (event) => {\n //We will store the message in 'data'.\n const data = JSON.parse(event.data);\n\n if (data.type === 'authenticated') {\n document.getElementById('authSection').style.display = 'block';\n }\n\n if (data.type === 'error') {\n alert(data.message);\n }\n\n if (data.type === 'userList') {\n const userList = document.getElementById('userList');\n userList.innerHTML = '';\n data.users.forEach(user => {\n //This is a list\n const li = document.createElement('li');\n li.textContent = user;\n userList.appendChild(li);\n });\n }\n\n //Actually show the message\n if (data.type === 'message') {\n //Grab the HTML element we set up to hold messages.\n const messages = document.getElementById('messages');\n const messageElement = document.createElement('div');\n messageElement.textContent = `${data.from}: ${data.message}`;\n messages.appendChild(messageElement);\n }\n};\n\n//The connect button\ndocument.getElementById('connectButton').addEventListener('click', () => {\n const userId = document.getElementById('userIdInput').value;\n ws.send(JSON.stringify({ type: 'register', userId }));\n});\n\n//The send message button\ndocument.getElementById('sendButton').addEventListener('click', () => {\n const message = document.getElementById('messageInput').value;\n const toUserId = document.getElementById('toUserIdInput').value;\n ws.send(JSON.stringify({ type: 'message', to: toUserId, message }));\n});\n\n/////////////////////////////////////////////","script.js":"// Check out server.js and client.js\n\n\n\n","server.js":"/////SERVER.JS/////\n//This should run on a different computer.\n\nconst express = require('express');\nconst http = require('http');\nconst WebSocket = require('ws');\n\nconst app = express();\nconst server = http.createServer(app);\nconst wss = new WebSocket.Server({ server });\n\nconst connections = {};\nconst PASSWORD = \"jippity\";\n\napp.use(express.static('public'));\n\nwss.on('connection', (ws) => {\n let userId = null;\n\n ws.on('message', (message) => {\n console.log(\"Received message from client:\", message);\n const data = JSON.parse(message);\n\n if (data.type === 'authenticate') {\n console.log(\"Authentication request received with password:\", data.password);\n if (data.password === PASSWORD) {\n ws.send(JSON.stringify({ type: 'authenticated' }));\n console.log(\"Authentication successful.\");\n } else {\n ws.send(JSON.stringify({ type: 'error', message: 'Invalid password' }));\n console.log(\"Authentication failed. Invalid password.\");\n ws.close();\n }\n }\n\n if (data.type === 'register') {\n console.log(\"Registering user ID:\", data.userId);\n userId = data.userId;\n connections[userId] = ws;\n broadcastUserList();\n }\n\n if (data.type === 'message') {\n console.log(\"Sending message to user ID:\", data.to, \"Message:\", data.message);\n const recipientWs = connections[data.to];\n if (recipientWs) {\n recipientWs.send(JSON.stringify({ type: 'message', from: userId, message: data.message }));\n }\n }\n });\n\n ws.on('close', () => {\n if (userId) {\n console.log(\"User disconnected:\", userId);\n delete connections[userId];\n broadcastUserList();\n }\n });\n\n function broadcastUserList() {\n const userList = Object.keys(connections);\n for (const user in connections) {\n connections[user].send(JSON.stringify({ type: 'userList', users: userList }));\n }\n }\n});\n\nserver.listen(3000, () => {\n console.log('Server started on http://localhost:3000');\n});\n\n","style.css":"","index.html":"\n\n\n\n REtW 5\n\n\n\n

REtW 5: Networking

Enter Password to Connect:

\n \n \n \n \n \n \n \n \n \n\n\n\n\n"},"chat_history":[],"assets":[{"project_id":1494,"created_at":"2024-10-10T18:18:30.300400Z","resource_type":"image","id":24132,"cloudinary_id":"efzbltzllpinbcmo1ogf","name":"bug","deleted":false}],"messages_sent":30,"comments":[],"steps":[{"complete":false,"step_number":0,"updated_at":"2024-05-21T13:51:15.658914","id":8217,"instruction":"Meet the adventurous protagonist who will guide the players through the world of networking.","title":"Introduce Netty the Explorer","created_at":"2024-05-21T13:51:15.658913","project_id":1494},{"complete":false,"step_number":1,"updated_at":"2024-05-21T13:51:15.658971","id":8218,"instruction":"Explore a visually appealing map representing a network, with computers and connections that the players can interact with.","title":"Interactive Network Map","created_at":"2024-05-21T13:51:15.658970","project_id":1494},{"complete":false,"step_number":2,"updated_at":"2024-05-21T13:51:15.659013","id":8219,"instruction":"Allow players to send and receive messages between computers, emphasizing the concept of data transmission over a network.","title":"Send and Receive Messages","created_at":"2024-05-21T13:51:15.659013","project_id":1494},{"complete":false,"step_number":3,"updated_at":"2024-05-21T13:51:15.659054","id":8220,"instruction":"Incorporate mini-games that reinforce networking concepts in a fun and interactive way.","title":"Mini Games for Learning","created_at":"2024-05-21T13:51:15.659053","project_id":1494},{"complete":false,"step_number":4,"updated_at":"2024-05-21T13:51:15.659092","id":8221,"instruction":"Implement controls for Netty and her friends to navigate through the network map and interact with different elements.","title":"Character Movement Controls","created_at":"2024-05-21T13:51:15.659092","project_id":1494},{"complete":false,"step_number":5,"updated_at":"2024-05-21T13:51:15.659132","id":8222,"instruction":"Track the players' progress and provide feedback to reinforce learning and encourage exploration.","title":"Score and Progress Tracking","created_at":"2024-05-21T13:51:15.659131","project_id":1494},{"complete":false,"step_number":6,"updated_at":"2024-05-21T13:51:15.659170","id":8223,"instruction":"Add visually appealing animations to demonstrate data transmission and network interactions in an engaging manner.","title":"Visual Animations","created_at":"2024-05-21T13:51:15.659169","project_id":1494},{"complete":false,"step_number":7,"updated_at":"2024-05-21T13:51:15.659230","id":8224,"instruction":"Include an interactive quiz to test players' understanding of networking concepts and reinforce learning outcomes.","title":"Interactive Quiz","created_at":"2024-05-21T13:51:15.659230","project_id":1494}]}

REtW 5: Networking

Choose an ID

Online Users

Send a Message

Messages