{"name":"REtW 5 [Brownsville]","description":"Client-Server relationship; chatbot!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/efzbltzllpinbcmo1ogf","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2024-12-03T20:38:35.308320Z","updated_at":"2024-12-03T20:38:35.308323Z","user_id":192,"status":"PRIVATE","parent_id":3545,"id":4856,"user":{"photo":null,"email":null,"recess_id":"cfb1457c-ce90-4d98-a6ed-7abb46cfc301","created_at":"2024-08-21T18:42:26.417915Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"xamseygo","id":192,"password_hash":null,"updated_at":"2024-08-21T18:42:26.417918Z","reset_token_expiry":null,"subscription_status":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":"green","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":[{"project_id":4856,"creator":null,"cloudinary_id":"efzbltzllpinbcmo1ogf","deleted":false,"id":50597,"created_at":"2024-12-03T20:38:35.333774Z","name":"bug","resource_type":"image","tags":null}],"messages_sent":0,"comments":[],"steps":[{"title":"Introduce Netty the Explorer","instruction":"Meet the adventurous protagonist who will guide the players through the world of networking.","created_at":"2024-05-21T13:51:15.658913","project_id":4856,"complete":false,"step_number":0,"updated_at":"2024-12-03T20:38:35.325784","id":11505},{"title":"Interactive Network Map","instruction":"Explore a visually appealing map representing a network, with computers and connections that the players can interact with.","created_at":"2024-05-21T13:51:15.658970","project_id":4856,"complete":false,"step_number":1,"updated_at":"2024-12-03T20:38:35.325892","id":11506},{"title":"Send and Receive Messages","instruction":"Allow players to send and receive messages between computers, emphasizing the concept of data transmission over a network.","created_at":"2024-05-21T13:51:15.659013","project_id":4856,"complete":false,"step_number":2,"updated_at":"2024-12-03T20:38:35.325960","id":11507},{"title":"Mini Games for Learning","instruction":"Incorporate mini-games that reinforce networking concepts in a fun and interactive way.","created_at":"2024-05-21T13:51:15.659053","project_id":4856,"complete":false,"step_number":3,"updated_at":"2024-12-03T20:38:35.326039","id":11508},{"title":"Character Movement Controls","instruction":"Implement controls for Netty and her friends to navigate through the network map and interact with different elements.","created_at":"2024-05-21T13:51:15.659092","project_id":4856,"complete":false,"step_number":4,"updated_at":"2024-12-03T20:38:35.326098","id":11509},{"title":"Score and Progress Tracking","instruction":"Track the players' progress and provide feedback to reinforce learning and encourage exploration.","created_at":"2024-05-21T13:51:15.659131","project_id":4856,"complete":false,"step_number":5,"updated_at":"2024-12-03T20:38:35.326148","id":11510},{"title":"Visual Animations","instruction":"Add visually appealing animations to demonstrate data transmission and network interactions in an engaging manner.","created_at":"2024-05-21T13:51:15.659169","project_id":4856,"complete":false,"step_number":6,"updated_at":"2024-12-03T20:38:35.326202","id":11511},{"title":"Interactive Quiz","instruction":"Include an interactive quiz to test players' understanding of networking concepts and reinforce learning outcomes.","created_at":"2024-05-21T13:51:15.659230","project_id":4856,"complete":false,"step_number":7,"updated_at":"2024-12-03T20:38:35.326250","id":11512}]}

REtW 5: Networking

Choose an ID

Online Users

Send a Message

Messages