{"name":"REtW 5 [Brownsville]","description":"Client-Server relationship; chatbot!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/efzbltzllpinbcmo1ogf","view_count":2,"fork_count":2,"expires_at":null,"created_at":"2024-12-03T20:23:23.431999Z","updated_at":"2024-12-03T20:23:23.432000Z","user_id":182,"status":"PRIVATE","parent_id":3545,"id":4852,"user":{"username":"flower","id":182,"password_hash":"$2b$12$de434VuhlXU4FXHMSwrj/eweUD6F9th0KavH2khb2dmr/Fvdm0idC","updated_at":"2024-08-19T18:23:08.340578Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"lily.gray@alpha.school","recess_id":"4054c251-f71c-4583-8cc4-73403ebdcbec","created_at":"2024-08-19T18:23:08.340576Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"\n///////////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 idea. In this case, the server's.\nconst serverIp = '76.82.105.51';\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(`ws://${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/////////////////////////////////////////////\n\n\n/////SERVER.JS/////\n//This should be its own file.\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"},"chat_history":[],"assets":[{"cloudinary_id":"efzbltzllpinbcmo1ogf","project_id":4852,"created_at":"2024-12-03T20:23:23.439781Z","deleted":false,"name":"bug","resource_type":"image","id":50593}],"messages_sent":0,"comments":[],"steps":[{"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":4852,"complete":false,"step_number":0,"updated_at":"2024-12-03T20:23:23.435266","id":11473},{"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":4852,"complete":false,"step_number":1,"updated_at":"2024-12-03T20:23:23.435350","id":11474},{"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":4852,"complete":false,"step_number":2,"updated_at":"2024-12-03T20:23:23.435403","id":11475},{"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":4852,"complete":false,"step_number":3,"updated_at":"2024-12-03T20:23:23.435455","id":11476},{"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":4852,"complete":false,"step_number":4,"updated_at":"2024-12-03T20:23:23.435504","id":11477},{"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":4852,"complete":false,"step_number":5,"updated_at":"2024-12-03T20:23:23.435552","id":11478},{"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":4852,"complete":false,"step_number":6,"updated_at":"2024-12-03T20:23:23.435600","id":11479},{"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":4852,"complete":false,"step_number":7,"updated_at":"2024-12-03T20:23:23.435648","id":11480}]}

REtW 5: Networking

Choose an ID

Online Users

Send a Message

Messages