【綜合練習】多人聊天室：實作 1 - 解答 | 程式專案

{"id":576217,"student_id":2589,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n    \u003ctitle\u003eDocument\u003c/title\u003e\\n    \u003cscript src=\\\"https://code.jquery.com/jquery-3.4.1.min.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv id=\\\"chatbox-card\\\"\u003e\\n        \u003cdiv id=\\\"chatbox\\\"\u003e\\n            \u003cp style=\\\"color: rgb(255, 255, 255);\\\"\u003e\\n                【小明 下午1:00:00】加入聊天室\\n            \u003c/p\u003e\\n            \u003cp style=\\\"color: rgb(255, 255, 255);\\\"\u003e\\n                【大偉 下午1:00:00】加入聊天室\\n            \u003c/p\u003e\\n            \u003cp style=\\\"color: rgb(255, 255, 255);\\\"\u003e\\n                【凱文 下午1:00:00】加入聊天室\\n            \u003c/p\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n    \u003cinput id=\\\"input\\\" type=\\\"text\\\" placeholder=\\\"說些什麼...\\\"\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"* {\\n    box-sizing: border-box;\\n}\\n\\nhtml, body {\\n    background-color: #222222;\\n    font-family: Monospace;\\n    height: 100%;\\n    margin: 0;\\n    padding: 0;\\n}\\n\\nbody {\\n    padding: 50px;\\n}\\n\\n#chatbox-card {\\n    height: calc(100% - 50px);\\n    border: 1px solid #bbbbbb;\\n    padding: 10px;\\n}\\n\\n#chatbox {\\n    height: 80vh;\\n    padding: 5px;\\n    margin: 5px;\\n    overflow-y: scroll;\\n    border-radius: 10px;\\n}\\n\\n#chatbox \u003e p {\\n    margin: 0;\\n    color: #bbbbbb;\\n    font-size: 1rem;\\n}\\n\\ninput {\\n    height: 50px;\\n    width: 100%;\\n    padding: 10px 10px;\\n    border: 1px solid #bbbbbb;\\n    border-top-width: 0;\\n    box-sizing: border-box;\\n    color: #bbbbbb;\\n    background-color: #222222;\\n    outline: none;\\n    font-family: Monospace;\\n    font-size: 1rem;\\n}\\n\\n\\n\\n\\n\\n\\n\\n\",\"js\":\"\"}","created_at":"2023-07-28T10:23:53.686+08:00","updated_at":"2023-07-28T10:23:57.438+08:00","name":"【綜合練習】多人聊天室：實作 1 - 解答","language":"web","screenshot":{"url":null},"parent_id":576216,"plugin":"socket = {\n    on: DB.onMessage.bind(DB),\n    emit:DB.broadcast.bind(DB)\n}\n\nvar name = prompt('輸入你的名稱 ?') || '匿名';\nvar text = '加入聊天室';\nvar time = new Date();\ntime = time.toLocaleTimeString();\nvar r = Math.random()*255;\nvar g = Math.random()*255;\nvar b = Math.random()*255;\nvar color = `rgb(${r}, ${g}, ${b})`;\n\nappendComment(text, name, time, color);\n\n$('#input').keypress(keypress);\n\nsocket.on('message', onMessage); // 監聽訊息\nsocket.emit('message', [text, name, time, color]); // 廣播訊息\n\n// 將訊息資料新增到畫面上\nfunction appendComment (text, name, time, color) {\n    var html = `\n        \u003cp style=\"color: ${color};\"\u003e\n            【${name} ${time}】${text}\n        \u003c/p\u003e\n    `\n    $('#chatbox').append(html); \n    $(\"#chatbox\").scrollTop($(\"#chatbox\")[0].scrollHeight);\n}\n\n// 當輸入框按下 enter 按鍵時，廣播訊息給其他在線使用者\nfunction keypress(e) {\n    var text = $('input').val();\n    var time = new Date();\n    time = time.toLocaleTimeString();\n    \n    if (e.keyCode == 13 \u0026\u0026 text != '') {\n        appendComment(text, name, time, color);\n        $('input').val('');\n        socket.emit('message', [text, name, time, color]);\n    }\n}\n\n// 當接收到訊息資料時，將資料新增到介面上\nfunction onMessage(data) {\n    appendComment(data[0], data[1], data[2], data[3]);\n}","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":63,"hashid":"d5msym9z5","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}