系統城裝機大師 - 唯一官網:www.farandoo.com!

當前位置:首頁 > 網絡編程 > JavaScript > 詳細頁面

基于node+websocket+html實現騰訊課堂聊天室聊天功能

時間:2020-03-04來源:電腦系統城作者:電腦系統城

受疫情影響很多中小學選擇線上教程,大多數學校采用騰訊課堂直播,那么今天小編給大家分享一段代碼關于基于node+websocket+html實現騰訊課堂聊天室聊天功能。

前端部分用到的知識:websocket,h5,contenteditable屬性服務端部分:node, websocket部分效果:

基于node+websocket+html實現騰訊課堂聊天室聊天功能

基于node+websocket+html實現騰訊課堂聊天室聊天功能

基于node+websocket+html實現騰訊課堂聊天室聊天功能

功能細節需要注意的地方

前端部分:

(1)輸入框要可以輸入表情圖片( 不能用textarea,要用contenteditable='true'來實現)

(2)消息數量的顯示限制,比如我最多只顯示最新的30條消息 (通過對dom節點的長度判斷和移除實現)

  (3) 最新消息要始終顯示在底部(通過scrollTop來實現)

 (4)對信息分類進行區分,是用戶進入,離開,普通消息,還是送花進行劃分

服務端部分:

websocket相關知識的運用

代碼:


 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" />
  9. <title>聊天室</title>
  10. </head>
  11.  
  12. <body>
  13. <div class="container">
  14. <header>不充錢你覺得你會變得更強嗎?。?!</header>
  15. <div class="cont">
  16. <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls="controls"></video>
  17. </div>
  18. <div class="right">
  19. <div class="right_top">
  20. <div class="item ac_border">討論</div>
  21. <div class="item" id="person">成員</div>
  22. </div>
  23. <div class="r_item">
  24. <div class="right_cont">
  25. <ul id="messageWrap"></ul>
  26. </div>
  27. <div class="right_bot">
  28. <div class="r_b_t clearfix">
  29. <div class="emoji " title="選擇標簽"></div>
  30. <div class="flower" title="獻花"></div>
  31. </div>
  32. <div class="inputMeg_f">
  33. <!--inputMeg外添加div inputMeg_f 的原因是為了自定義滾動條的手勢是箭頭,如果不加,改成inputMeg設置滾動條樣式,那么滾動條的熟悉是輸入手勢-->
  34. <div class="inputMeg" contenteditable="true" placeholder="請輸入文字"></div>
  35. </div>
  36. <div class="send_btn">發送</div>
  37. <div id="emojiBox" class="clearfix"></div>
  38. </div>
  39. </div>
  40. <div class="r_item" style="display: none">
  41. <ul class="personWrap"></ul>
  42. </div>
  43. </div>
  44. </div>
  45. </body>
  46.  
  47. <script src="../jquery.js"></script>
  48. <script>
  49. $(".right_top .item").click(function () {
  50. $(this).siblings().removeClass('ac_border')
  51. $(this).addClass('ac_border')
  52. $('.r_item').css('display','none').eq($(this).index()).css('display','block')
  53. })
  54.  
  55. function checkValue() {
  56.  
  57. $(".emoji").off('click').click(function (e) {
  58. $("#emojiBox").css('display', 'block')
  59. var ev = e || window.event;
  60. ev.stopPropagation();
  61. })
  62. $(".container").off('click').click(function () {
  63. $("#emojiBox").css('display', 'none')
  64. })
  65.  
  66.  
  67. }
  68. checkValue();
  69.  
  70. //生成表情
  71. var emojiHtml = '';
  72. var emojiBox = document.getElementById('emojiBox');
  73. for (var i = 0; i < 7; i++) {
  74. for (var j = 0; j < 15; j++) {
  75. var dom = document.createElement('div');
  76. dom.className = 'emojiItem';
  77. dom.style.backgroundPositionX = -24 * j + 'px';
  78. dom.style.backgroundPositionY = -29 * i + 'px';
  79. emojiBox.appendChild(dom)
  80. chooseEmoji(i, j, dom)
  81. }
  82.  
  83. }
  84.  
  85. function chooseEmoji(i, j, dom) {
  86. dom.onclick = function (e) {
  87. const src = 'img/icon' + (i * 15 + j) + '.gif';
  88. var img = $('<img class="emojiImg" src=' + src + '>')
  89. $('.inputMeg').append(img)
  90. $("#emojiBox").css('display', 'none')
  91. var ev = e || window.event;
  92. ev.stopPropagation();
  93. }
  94. }
  95.  
  96. var userName=''; //當前登錄的用戶
  97. //websocket
  98. var websocket = new WebSocket(
  99. 'ws://localhost:8001/'); //連接的地址,是ws協議,不是http協議(本地地址localhost:8001,要想手機也能訪問到,改成本地ip192.168.0.107:8001)
  100. websocket.onopen = function () { //監聽建立連接
  101. $('.send_btn').off('click').click(function () {
  102. var text = $('.inputMeg').html()
  103. if (text != '' && text != '請輸入文字') {
  104. websocket.send(JSON.stringify({data:text,type:'message'})) //發送消息
  105. $('.inputMeg').html('')
  106. }
  107. });
  108.  
  109. $('.flower').off('click').click(function(){ //送花
  110. var dom= '<span>"'+userName+'"</span>送給<br> "春哥" 一朵小花<i class="flowIcon"></i>'
  111.  
  112. websocket.send(JSON.stringify({data:dom,type:'flower'})) //發送消息
  113. })
  114.  
  115. }
  116. websocket.onmessage = function (e) {
  117. var res = JSON.parse(e.data);
  118. message(res)
  119. }
  120.  
  121.  
  122. function message(res) {
  123. var dom = document.createElement('li');
  124. switch (res.type) {
  125. case 'enter':
  126. dom.innerHTML = res.data;
  127. dom.style.color = 'green';
  128. userName=res.nickname;
  129. person(res);
  130. break;
  131. case 'leave':
  132. dom.innerHTML = res.data;
  133. dom.style.color = 'red';
  134. person(res)
  135. break;
  136. case 'message':
  137. name.innerHTML = res.nickname + ': ';
  138. dom.innerHTML = "<span class='nickName'>" + res.nickname + ": </span> " + res.data + ""
  139. break;
  140. case 'flower':
  141. dom.className='flowerLi';
  142. dom.innerHTML=res.data;
  143. break;
  144. default:
  145. break;
  146. }
  147. document.getElementById('messageWrap').appendChild(dom);
  148. limitLength(30)
  149. scrollBottom();
  150.  
  151. //成員顯示
  152.  
  153. }
  154.  
  155. function scrollBottom() { //顯示最新消息在底部
  156. var h1 = document.getElementsByClassName('right_cont')[0].offsetHeight;
  157. var h2 = document.getElementById('messageWrap').offsetHeight;
  158. if (h2 > h1) {
  159. $('.right_cont').scrollTop(h2 - h1);
  160. }
  161. }
  162.  
  163. function limitLength(num) { //限制聊天室最多能顯示幾條消息
  164. var li = $('#messageWrap li')
  165. if (li.length > num) {
  166. li.eq(0).remove();
  167. }
  168. }
  169.  
  170. function person(res){ //成員顯示
  171. var html=''
  172. for(var i=0;i<res.client.length;i++){
  173. html+= '<li><span class="nickname">'+res.client[i]+'</span></li>'
  174. }
  175. $('.personWrap').html(html);
  176.  
  177. $('#person').html('成員('+res.client.length+')')
  178.  
  179. }
  180. </script>
  181.  
  182. </html>
  183.  
  184.  
  185. server.js:
  186. var ws = require("nodejs-websocket")
  187. var port=8001;
  188. var clientCount=0;
  189. var nicknameArr=[];
  190. var server = ws.createServer(function (conn) {
  191. clientCount++;
  192. conn.nickname='user'+clientCount;
  193. nicknameArr.push(conn.nickname)
  194. var mes={type:'enter',data:'歡迎 '+conn.nickname+' 進入聊天',nickname:conn.nickname,client:nicknameArr}
  195. broadcast(JSON.stringify(mes))
  196. conn.on("text", function (str) { //監聽客戶端發送過來的消息
  197. var zstr=JSON.parse(str)
  198. var mes={type:zstr.type,data:zstr.data,nickname:conn.nickname,client:nicknameArr}
  199. broadcast(JSON.stringify(mes))
  200.  
  201. })
  202. conn.on("close", function (code, reason) {
  203. clientCount--;
  204. for(var i=nicknameArr.length-1;i>=0;i--){ //刪除退出的用戶
  205. if(conn.nickname==nicknameArr[i]){
  206. nicknameArr.splice(i,1)
  207. }
  208. }
  209. var mes={type:'leave',data:conn.nickname+' 離開聊天',nickname:conn.nickname,client:nicknameArr}
  210. broadcast(JSON.stringify(mes))
  211. });
  212. conn.on('error',function(err){
  213. console.log('handle err')
  214. })
  215. }).listen(port)
  216. function broadcast(str){ //獲取客戶端連接的人數并返回消息
  217. server.connections.forEach(function(connection){
  218. connection.sendText(str)
  219. })
  220.  
  221. }

總結

到此這篇關于基于node+websocket+html實現騰訊課堂聊天室聊天功能的文章就介紹到這了,更多相關node+websocket+html聊天室內容請搜索我們以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持我們!

分享到:

相關信息

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

jlzzjlzz亚洲乱熟在线播放