多人聊天室 | Programming Project | OrangeApple Learning Platform

{"id":199468,"student_id":12205,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\\t\u003ctitle\u003eDocument\u003c/title\u003e\\n\\t\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\\\"\u003e\\n        \u003cp style=\\\"color: ＃0000000;\\\"\u003e\\n            【測試 下午測試:測試:測試】測試\\n        \u003c/p\u003e\\n        \u003cp style=\\\"color: ＃0000000;\\\"\u003e\\n            【測試 下午測試:測試:測試】測試\\n        \u003c/p\u003e\\n        \u003cp style=\\\"color:＃0000000 ;\\\"\u003e\\n            【測試 下午測試:測試:測試】測試\\n        \u003c/p\u003e\\n    \u003c/div\u003e\\n    \u003cinput id=\\\"input\\\" type=\\\"text\\\" placeholder=\\\"說些什麼...\\\"\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\\n\\n\u003c!--=====================rgb(255, 255, 255)=========================--\u003e\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\",\"css\":\"body {\\n    padding: 30px;\\n    background-color: #222222;\\n    font-family: Monospace;\\n}\\n\\n#chatbox {\\n    height: 400px;\\n    padding: 5px;\\n    border: 1px solid #bbbbbb;\\n    overflow-y: scroll;\\n}\\n\\n#chatbox \u003e p {\\n    margin: 0;\\n    color: #bbbbbb;\\n    font-size: 1rem;\\n}\\n\\ninput {\\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\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\",\"js\":\"var name = prompt();\\nvar text = \\\"加入聊天室\\\";\\nvar time = new Date();\\nvar r = Math.random()*125+100;\\nvar g = Math.random()*125+100;\\nvar b = Math.random()*125+100;      \\nvar color = `rgb(${r}, ${g}, ${b})`;\\ntime = time.toLocaleTimeString();\\n$('#input').keypress(keypress);\\nappendComment(text, name, time, color);\\nsocket.emit(\\\"message\\\", [text, name, time, color]);\\nsocket.on(\\\"message\\\", onMessage);\\n// 將訊息資料新增到畫面上\\nfunction appendComment (text, name, time, color) {\\n    var html = `\u003cp style=\\\"color: ${color};\\\"\u003e\\n    【${name} ${time}】${text}\\n    \u003c/p\u003e`;\\n    $(\\\"#chatbox\\\").append(html);\\n    var height = $(\\\"#chatbox\\\").prop(\\\"scrollHeight\\\");\\n    $(\\\"#chatbox\\\").scrollTop(height);\\n}\\n// 當輸入框按下 enter 按鍵時，廣播訊息給其他在線使用者\\nfunction keypress(e) {\\n    var text = $(\\\"#input\\\").val();\\n    var time = new Date();\\n    time = time.toLocaleTimeString();\\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}\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\"}","created_at":"2020-10-30T20:40:53.931+08:00","updated_at":"2020-11-13T12:49:03.563+08:00","name":"多人聊天室","language":"web","screenshot":{"url":"/uploads/project/screenshot/199468/e19ce8575bcb646c3ecb2987c3b18736.jpg"},"parent_id":193817,"plugin":"socket = {\n    on: DB.onMessage.bind(DB),\n    emit:DB.broadcast.bind(DB)\n}","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":189,"hashid":"9ygspq8d3","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}