自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

沉寂了一周，我開發(fā)了一個聊天室

作者：maomin9761
開發(fā) 前端
今天，我們來從零開始開發(fā)一款聊天室。好，我們現(xiàn)在就開始。

[[381137]]

 前言

最近一周沒有發(fā)文章了，我在這里向大家說一聲抱歉。今天，我們來從零開始開發(fā)一款聊天室。好，我們現(xiàn)在就開始。

了解WebSocket

開發(fā)聊天室，我們需要用到WebSocket這個網(wǎng)絡通信協(xié)議，那么為什么會用到它呢?

我們首先來引用阮一峰大佬的一篇文章一段話：

  • 初次接觸 WebSocket 的人，都會問同樣的問題：我們已經(jīng)有了 HTTP 協(xié)議，為什么還需要另一個協(xié)議?它能帶來什么好處?
  • 答案很簡單，因為 HTTP 協(xié)議有一個缺陷：通信只能由客戶端發(fā)起。
  • 舉例來說，我們想了解今天的天氣，只能是客戶端向服務器發(fā)出請求，服務器返回查詢結果。HTTP 協(xié)議做不到服務器主動向客戶端推送信息。
  • 這種單向請求的特點，注定了如果服務器有連續(xù)的狀態(tài)變化，客戶端要獲知就非常麻煩。我們只能使用"輪詢"：每隔一段時候，就發(fā)出一個詢問，了解服務器有沒有新的信息。最典型的場景就是聊天室。
  • 輪詢的效率低，非常浪費資源(因為必須不停連接，或者 HTTP 連接始終打開)。因此，工程師們一直在思考，有沒有更好的方法。WebSocket 就是這樣發(fā)明的。

我們來借用MDN網(wǎng)站上的官方介紹總結一下：

WebSockets 是一種先進的技術。它可以在用戶的瀏覽器和服務器之間打開交互式通信會話。使用此API，您可以向服務器發(fā)送消息并接收事件驅動的響應，而無需通過輪詢服務器的方式以獲得響應。

WebSocket 協(xié)議在2008年誕生，2011年成為國際標準。

WebSocket特點

服務器可以主動向客戶端推送信息，客戶端也可以主動向服務器發(fā)送信息，是真正的雙向平等對話，屬于服務器推送技術的一種。

建立在 TCP 協(xié)議之上，服務器端的實現(xiàn)比較容易。

與 HTTP 協(xié)議有著良好的兼容性。默認端口也是80和443，并且握手階段采用 HTTP 協(xié)議，因此握手時不容易屏蔽，能通過各種 HTTP 代理服務器。

數(shù)據(jù)格式比較輕量，性能開銷小，通信高效。

可以發(fā)送文本，也可以發(fā)送二進制數(shù)據(jù)。

沒有同源限制，客戶端可以與任意服務器通信。

協(xié)議標識符是ws(如果加密，則為wss)，即ws對應http，wss對應https。服務器網(wǎng)址就是 URL。即ws://www.xx.com或wss://www.xx.com

WebSocket客戶端常用API

WebSocket 對象提供了用于創(chuàng)建和管理 WebSocket連接，以及可以通過該連接發(fā)送和接收數(shù)據(jù)的 API。

使用WebSocket()構造函數(shù)來構造一個WebSocket 。

屬性

1.WebSocket.onopen

用于指定連接成功后的回調(diào)函數(shù)。

2.WebSocket.onmessage

用于指定當從服務器接受到信息時的回調(diào)函數(shù)。

3.WebSocket.onclose

用于指定連接關閉后的回調(diào)函數(shù)。

4.WebSocket.onerror

用于指定連接失敗后的回調(diào)函數(shù)。

方法

1.WebSocket.close()

關閉當前鏈接。

2.WebSocket.send(data)

客戶端發(fā)送數(shù)據(jù)到服務器，對要傳輸?shù)臄?shù)據(jù)進行排隊。

客戶端舉例

  1. // Create WebSocket connection. 
  2. const socket = new WebSocket('ws://localhost:8080'); // 這里的地址是服務器的websocket服務地址 
  3.  
  4. // Connection opened 
  5. socket.onopen = function(evt) {  
  6.   console.log("Connection open ...");  
  7.   ws.send("Hello WebSockets!"); 
  8. }; 
  9.  
  10. // Listen for messages 
  11. socket.onmessage = function(evt) { 
  12.   console.log( "Received Message: " + evt.data); 
  13.   socket.close(); 
  14. }; 
  15.  
  16. // Connection closed 
  17. socket.onclose = function(evt) { 
  18.   console.log("Connection closed."); 
  19. }; 

常用的WebSocket服務端

這里服務端我們使用Node.js，這里向大家介紹幾個常用的庫。

  1. ws
  2. socket.io
  3. nodejs-websocket

具體用法，大家可以上網(wǎng)瀏覽詳細文檔，這里就不一一介紹啦。不過在這篇文章中。我將會給大家使用ws與nodejs-websocket這兩個模塊來分別進行項目開發(fā)。

客戶端與服務端都介紹完啦!我們就趕快行動起來吧!

開發(fā)本地端(或局域網(wǎng))聊天室(第一種)

我們將基于Vue.js@3.0開發(fā)聊天室，原因是擁抱新技術。怎么搭建vue腳手架，這里就不介紹了，想必大家也會。我們直接就上代碼。

客戶端

  1. <template> 
  2.   <div class="home"> 
  3.     <div class="count"> 
  4.       <p>在線人數(shù)：{{ count }}</p> 
  5.     </div> 
  6.     <div class="content"> 
  7.       <div class="chat-box" ref="chatBox"> 
  8.         <div 
  9.           v-for="(item, index) in chatArr" 
  10.           :key="index" 
  11.           class="chat-item" 
  12.         > 
  13.           <div v-if="item.name === name" class="chat-msg mine"> 
  14.             <p class="msg mineBg">{{ item.txt }}</p> 
  15.             <p class="user" :style="{ background: bg }"> 
  16.               {{ item.name.substring(item.name.length - 5, item.name.length) }} 
  17.             </p> 
  18.           </div> 
  19.           <div v-else class="chat-msg other"> 
  20.             <p class="user" :style="{ background: item.bg }"> 
  21.               {{ item.name.substring(item.name.length - 5, item.name.length) }} 
  22.             </p> 
  23.             <p class="msg otherBg">{{ item.txt }}</p> 
  24.           </div> 
  25.         </div> 
  26.       </div> 
  27.     </div> 
  28.     <div class="footer"> 
  29.       <textarea 
  30.         placeholder="說點什么..." 
  31.         v-model="textValue" 
  32.         autofocus 
  33.         ref="texta" 
  34.         @keyup.enter="send" 
  35.       ></textarea> 
  36.       <div class="send-box"> 
  37.         <p class="send active" @click="send">發(fā)送</p> 
  38.       </div> 
  39.     </div> 
  40.   </div> 
  41. </template> 
  42.  
  43. <script> 
  44. import { onMounted, onUnmounted, ref, reactive, nextTick } from "vue"; 
  45. export default { 
  46.   name: "Home", 
  47.   setup() { 
  48.     let socket = null; 
  49.     const path = "ws://localhost:3000/"; // 本地服務器地址 
  50.     const textValue = ref(""); 
  51.     const chatBox = ref(null); 
  52.     const texta = ref(null); 
  53.     const count = ref(0); 
  54.     const name = new Date().getTime().toString(); 
  55.     const bg = randomRgb(); 
  56.     const chatArr = reactive([]); 
  57.     function init() { 
  58.       if (typeof WebSocket === "undefined") { 
  59.         alert("您的瀏覽器不支持socket"); 
  60.       } else { 
  61.         socket = new WebSocket(path); 
  62.         socket.onopen = open; 
  63.         socket.onerror = error; 
  64.         socket.onclose = closed; 
  65.         socket.onmessage = getMessage; 
  66.         window.onbeforeunload = function(e) { 
  67.           e = e || window.event; 
  68.           if (e) { 
  69.             e.returnValue = "關閉提示"; 
  70.             socket.close(); 
  71.           } 
  72.           socket.close(); 
  73.           return "關閉提示"; 
  74.         }; 
  75.       } 
  76.     } 
  77.     function open() { 
  78.       alert("socket連接成功"); 
  79.     } 
  80.     function error() { 
  81.       alert("連接錯誤"); 
  82.     } 
  83.     function closed() { 
  84.       alert("socket關閉"); 
  85.     } 
  86.     async function getMessage(msg) { 
  87.       if (typeof JSON.parse(msg.data) === "number") { 
  88.         console.log(JSON.parse(msg.data)); 
  89.         count.value = msg.data; 
  90.       } else { 
  91.         const obj = JSON.parse(msg.data); 
  92.         chatArr.push(obj); 
  93.       } 
  94.       await nextTick(); 
  95.       chatBox.value.scrollTop = chatBox.value.scrollHeight; 
  96.     } 
  97.     function randomRgb() { 
  98.       let R = Math.floor(Math.random() * 130 + 110); 
  99.       let G = Math.floor(Math.random() * 130 + 110); 
  100.       let B = Math.floor(Math.random() * 130 + 110); 
  101.       return "rgb(" + R + "," + G + "," + B + ")"; 
  102.     } 
  103.     function send() { 
  104.       if (textValue.value.trim().length > 0) { 
  105.         const obj = { 
  106.           name: name, 
  107.           txt: textValue.value, 
  108.           bg: bg, 
  109.         }; 
  110.         socket.send(JSON.stringify(obj)); 
  111.         textValue.value = ""; 
  112.         texta.value.focus(); 
  113.       } 
  114.     } 
  115.     function close() { 
  116.       alert("socket已經(jīng)關閉"); 
  117.     } 
  118.     onMounted(() => { 
  119.       init(); 
  120.     }); 
  121.     onUnmounted(() => { 
  122.       socket.onclose = close; 
  123.     }); 
  124.     return { 
  125.       send, 
  126.       textValue, 
  127.       chatArr, 
  128.       name, 
  129.       bg, 
  130.       chatBox, 
  131.       texta, 
  132.       randomRgb, 
  133.       count, 
  134.     }; 
  135.   }, 
  136. }; 
  137. </script> 

至于樣式文件，這里我也貼出來。

  1. html,body{ 
  2.   background-color: #e8e8e8; 
  3.   user-select: none; 
  4. } 
  5. ::-webkit-scrollbar { 
  6.   width: 8px; 
  7.   height: 8px; 
  8.   display: none; 
  9. } 
  10. ::-webkit-scrollbar-thumb { 
  11.   background-color: #D1D1D1; 
  12.   border-radius: 3px; 
  13.   -webkit-border-radius: 3px; 
  14.   border-left: 2px solid transparent; 
  15.   border-top: 2px solid transparent; 
  16. } 
  17. *{ 
  18.   margin: 0; 
  19.   padding: 0; 
  20. } 
  21. .mine { 
  22.   justify-content: flex-end; 
  23. } 
  24. .other { 
  25.   justify-content: flex-start; 
  26. } 
  27. .mineBg { 
  28.   background: #98e165; 
  29. } 
  30. .otherBg { 
  31.   background: #fff; 
  32. } 
  33. .home { 
  34.   position: fixed; 
  35.   top: 0; 
  36.   left: 50%; 
  37.   transform: translateX(-50%); 
  38.   width: 100%; 
  39.   height: 100%; 
  40.   min-width: 360px; 
  41.   min-height: 430px; 
  42.   box-shadow: 0 0 24px 0 rgb(19 70 80 / 25%); 
  43. } 
  44. .count{ 
  45.   height: 5%; 
  46.   display: flex; 
  47.   justify-content: center; 
  48.   align-items: center; 
  49.   background: #EEEAE8; 
  50.   font-size: 16px; 
  51. } 
  52. .content { 
  53.   width: 100%; 
  54.   height: 80%; 
  55.   background-color: #f4f4f4; 
  56.   overflow: hidden; 
  57. } 
  58. .footer { 
  59.   position: fixed; 
  60.   bottom: 0; 
  61.   width: 100%; 
  62.   height: 15%; 
  63.   background-color: #fff; 
  64. } 
  65. .footer textarea { 
  66.   width: 100%; 
  67.   height: 50%; 
  68.   background: #fff; 
  69.   border: 0; 
  70.   box-sizing: border-box; 
  71.   resize: none; 
  72.   outline: none; 
  73.   padding: 10px; 
  74.   font-size: 16px; 
  75. } 
  76. .send-box { 
  77.   display: flex; 
  78.   height: 40%; 
  79.   justify-content: flex-end; 
  80.   align-items: center; 
  81. } 
  82. .send { 
  83.   margin-right: 20px; 
  84.   cursor: pointer; 
  85.   border-radius: 3px; 
  86.   background: #f5f5f5; 
  87.   z-index: 21; 
  88.   font-size: 16px; 
  89.   padding: 8px 20px; 
  90. } 
  91. .send:hover { 
  92.   filter: brightness(110%); 
  93. } 
  94. .active { 
  95.   background: #98e165; 
  96.   color: #fff; 
  97. } 
  98. .chat-box { 
  99.   height: 100%; 
  100.   padding:0 20px; 
  101.   overflow-y: auto; 
  102. } 
  103. .chat-msg { 
  104.   display: flex; 
  105.   align-items: center; 
  106. } 
  107. .user { 
  108.   font-weight: bold; 
  109.   color: #fff; 
  110.   position: relative; 
  111.   word-wrap: break-word; 
  112.   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); 
  113.   width: 60px; 
  114.   height: 60px; 
  115.   line-height: 60px; 
  116.   border-radius:8px ; 
  117.   text-align: center; 
  118. } 
  119. .msg { 
  120.   margin: 0 5px; 
  121.   max-width: 74%; 
  122.   white-space: normal; 
  123.   word-break: break-all; 
  124.   color: #333; 
  125.   border-radius: 8px; 
  126.   padding: 10px; 
  127.   text-align: justify; 
  128.   font-size: 16px; 
  129.   box-shadow: 0px 0px 10px #f4f4f4; 
  130. } 
  131. .chat-item { 
  132.   margin: 20px 0; 
  133.   animation: up-down 1s both; 
  134. } 
  135. @keyframes up-down { 
  136.   0% { 
  137.     opacity: 0; 
  138.     transform: translate3d(0, 20px, 0); 
  139.   } 
  140.  
  141.   100% { 
  142.     opacity: 1; 
  143.     transform: none; 
  144.   } 
  145. } 

服務端

這里使用的是Node.js。

nodejs-websocket：websocket服務器和客戶端的nodejs模塊。

  1. const ws = require("nodejs-websocket"); 
  2. const server = ws.createServer((conn) => { 
  3.   conn.on("text", (str) => { 
  4.     broadcast(str); 
  5.   }); 
  6.   conn.on("error", (err) => { 
  7.     console.log(err); 
  8.   }); 
  9. }); 
  10. server.listen(3000, function () { 
  11.   console.log("open"); 
  12. }); 
  13. // 群發(fā)消息 
  14. function broadcast(data) { 
  15.   server.connections.forEach((conn) => { 
  16.     conn.sendText(data); 
  17.   }); 
  18. } 

項目一覽


在線人數(shù)為零，這不是bug，是因為當時在本地端沒有做，只是放上了這個版塊。不過，在云服務端我已經(jīng)放上了這個功能。那么，我們來看一下吧。

開發(fā)云端聊天室(第二種)

客戶端‍

  1. <template> 
  2.   <div class="home"> 
  3.     <div class="count"> 
  4.       <p>在線人數(shù)：{{ count }}</p> 
  5.     </div> 
  6.     <div class="content"> 
  7.       <div class="chat-box" ref="chatBox"> 
  8.         <div 
  9.           v-for="(item, index) in chatArr" 
  10.           :key="index" 
  11.           class="chat-item" 
  12.         > 
  13.           <div v-if="item.name === name" class="chat-msg mine"> 
  14.             <p class="msg mineBg">{{ item.txt }}</p> 
  15.             <p class="user" :style="{ background: bg }"> 
  16.               {{ item.name.substring(item.name.length - 5, item.name.length) }} 
  17.             </p> 
  18.           </div> 
  19.           <div v-else class="chat-msg other"> 
  20.             <p class="user" :style="{ background: item.bg }"> 
  21.               {{ item.name.substring(item.name.length - 5, item.name.length) }} 
  22.             </p> 
  23.             <p class="msg otherBg">{{ item.txt }}</p> 
  24.           </div> 
  25.         </div> 
  26.       </div> 
  27.     </div> 
  28.     <div class="footer"> 
  29.       <textarea 
  30.         placeholder="說點什么..." 
  31.         v-model="textValue" 
  32.         autofocus 
  33.         ref="texta" 
  34.         @keyup.enter="send" 
  35.       ></textarea> 
  36.       <div class="send-box"> 
  37.         <p class="send active" @click="send">發(fā)送</p> 
  38.       </div> 
  39.     </div> 
  40.   </div> 
  41. </template> 
  42.  
  43. <script> 
  44. import { onMounted, onUnmounted, ref, reactive, nextTick } from "vue"; 
  45. export default { 
  46.   name: "Home", 
  47.   setup() { 
  48.     let socket = null; 
  49.     const path = "wss:/xxx.com/wsline/"; // 這個網(wǎng)址只是測試網(wǎng)址，這里只是說明云服務地址 
  50.     const textValue = ref(""); 
  51.     const chatBox = ref(null); 
  52.     const texta = ref(null); 
  53.     const count = ref(0); 
  54.     const name = new Date().getTime().toString(); 
  55.     const bg = randomRgb(); 
  56.     const chatArr = reactive([]); 
  57.     function init() { 
  58.       if (typeof WebSocket === "undefined") { 
  59.         alert("您的瀏覽器不支持socket"); 
  60.       } else { 
  61.         socket = new WebSocket(path); 
  62.         socket.onopen = open; 
  63.         socket.onerror = error; 
  64.         socket.onclose = closed; 
  65.         socket.onmessage = getMessage; 
  66.         window.onbeforeunload = function(e) { 
  67.           e = e || window.event; 
  68.           if (e) { 
  69.             e.returnValue = "關閉提示"; 
  70.             socket.close(); 
  71.           } 
  72.           socket.close(); 
  73.           return "關閉提示"; 
  74.         }; 
  75.       } 
  76.     } 
  77.     function open() { 
  78.       alert("socket連接成功"); 
  79.     } 
  80.     function error() { 
  81.       alert("連接錯誤"); 
  82.     } 
  83.     function closed() { 
  84.       alert("socket關閉"); 
  85.     } 
  86.     async function getMessage(msg) { 
  87.       if (typeof JSON.parse(msg.data) === "number") { 
  88.         console.log(JSON.parse(msg.data)); 
  89.         count.value = msg.data; 
  90.       } else { 
  91.         const obj = JSON.parse(msg.data); 
  92.         chatArr.push(obj); 
  93.       } 
  94.       await nextTick(); 
  95.       chatBox.value.scrollTop = chatBox.value.scrollHeight; 
  96.     } 
  97.     function randomRgb() { 
  98.       let R = Math.floor(Math.random() * 130 + 110); 
  99.       let G = Math.floor(Math.random() * 130 + 110); 
  100.       let B = Math.floor(Math.random() * 130 + 110); 
  101.       return "rgb(" + R + "," + G + "," + B + ")"; 
  102.     } 
  103.     function send() { 
  104.       if (textValue.value.trim().length > 0) { 
  105.         const obj = { 
  106.           name: name, 
  107.           txt: textValue.value, 
  108.           bg: bg, 
  109.         }; 
  110.         socket.send(JSON.stringify(obj)); 
  111.         textValue.value = ""; 
  112.         texta.value.focus(); 
  113.       } 
  114.     } 
  115.     function close() { 
  116.       alert("socket已經(jīng)關閉"); 
  117.     } 
  118.     onMounted(() => { 
  119.       init(); 
  120.     }); 
  121.     onUnmounted(() => { 
  122.       socket.onclose = close; 
  123.     }); 
  124.     return { 
  125.       send, 
  126.       textValue, 
  127.       chatArr, 
  128.       name, 
  129.       bg, 
  130.       chatBox, 
  131.       texta, 
  132.       randomRgb, 
  133.       count, 
  134.     }; 
  135.   }, 
  136. }; 
  137. </script> 

樣式文件同本地端樣式，可以查看上方的代碼。

服務端

這里我使用了ws模塊，并且我也搭建了https服務器，并使用了更為安全的wss協(xié)議。接下來，我們來看下是怎么操作的。

  1. const fs = require("fs"); 
  2. const httpServ = require("https"); 
  3. const WebSocketServer = require("ws").Server; // 引用Server類 
  4.  
  5. const cfg = { 
  6.   port: 3456, 
  7.   ssl_key: "../../https/xxx.key", // 配置https所需的文件2 
  8.   ssl_cert: "../../https/xxx.crt", // 配置https所需的文件1 
  9. }; 
  10.  
  11. // 創(chuàng)建request請求監(jiān)聽器 
  12. const processRequest = (req, res) => { 
  13.   res.writeHead(200); 
  14.   res.end("Websocket linked successfully"); 
  15. }; 
  16.  
  17. const app = httpServ 
  18.   .createServer( 
  19.     { 
  20.       // 向server傳遞key和cert參數(shù) 
  21.       key: fs.readFileSync(cfg.ssl_key), 
  22.       cert: fs.readFileSync(cfg.ssl_cert), 
  23.     }, 
  24.     processRequest 
  25.   ) 
  26.   .listen(cfg.port); 
  27.  
  28. // 實例化WebSocket服務器 
  29. const wss = new WebSocketServer({ 
  30.   server: app, 
  31. }); 
  32. // 群發(fā) 
  33. wss.broadcast = function broadcast(data) { 
  34.     wss.clients.forEach(function each(client) { 
  35.       client.send(data); 
  36.     }); 
  37. }; 
  38. // 如果有WebSocket請求接入，wss對象可以響應connection事件來處理 
  39. wss.on("connection", (wsConnect) => { 
  40.   console.log("Server monitoring"); 
  41.   wss.broadcast(wss._server._connections); 
  42.   wsConnect.on("message", (message) => { 
  43.     wss.broadcast(message); 
  44.   }); 
  45.   wsConnect.on("close", function close() { 
  46.     console.log("disconnected"); 
  47.     wss.broadcast(wss._server._connections); 
  48.   }); 
  49. }); 

我們在云服務上啟動命令。

啟動成功!

 

這里還沒有結束，因為你使用的是ip地址端口，必須轉發(fā)到域名上。所以我使用的nginx進行轉發(fā)，配置如下參數(shù)。

  1. location /wsline/ { 
  2.      proxy_pass https://xxx:3456/; 
  3.      proxy_http_version 1.1; 
  4.      proxy_set_header Upgrade $http_upgrade; 
  5.      proxy_set_header Connection "Upgrade"; 
  6.      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
  7.      proxy_set_header Host $http_host; 
  8.      proxy_set_header X-Real-IP $remote_addr; 
  9.      proxy_set_header X-Forwarded-Proto https; 
  10.      proxy_redirect off; 
  11. } 

那么，重啟云端服務器，看下效果。

項目一覽

 

那么，到這里一款云端聊天室就這么做成了，可以實時顯示在線人數(shù)，這樣你就可以知道有多少人在這里跟你聊天。

結語

謝謝閱讀，希望我沒有浪費你的時間?？赐晡恼铝?，那么趕快行動起來吧，開發(fā)一款屬于自己的聊天室。

 

責任編輯：姜華 來源： 前端歷劫之路
聊天室開發(fā)WebSocket
相關推薦

2022-11-14 08:01:48

2024-01-18 11:15:46

Pythonsocket聊天室

2023-02-13 00:18:22

前端庫框架集合

2022-11-10 09:28:40

框架開發(fā)

2011-12-15 11:11:51

JavaNIO

2023-02-10 08:16:48

WebSocket簡易聊天室

2020-02-16 11:13:39

遠程辦公工具技術

2023-07-10 09:53:59

console開發(fā)插件

2021-04-26 07:31:22

SpringMVCweb框架

2022-07-26 14:53:10

WebSocket網(wǎng)絡通信協(xié)議

2016-07-25 18:09:29

2013-12-05 09:17:29

程序員Bug

2021-12-09 16:48:25

鴻蒙HarmonyOS應用

2021-12-29 19:20:41

數(shù)據(jù)GitHub服務器

2015-07-06 10:42:18

PHP聊天室應用

2020-11-04 07:56:19

工具Linux 翻譯

2021-11-16 09:38:10

鴻蒙HarmonyOS應用

2015-04-13 00:24:17

2021-10-14 18:46:29

Websocket瀏覽器API

2025-03-11 01:28:16

點贊
收藏

51CTO技術棧公眾號