日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
沉寂了一周，我開發(fā)了一個聊天室

 前言

在酒泉等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站設(shè)計、網(wǎng)站制作 網(wǎng)站設(shè)計制作按需策劃,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站建設(shè),全網(wǎng)營銷推廣,成都外貿(mào)網(wǎng)站制作,酒泉網(wǎng)站建設(shè)費用合理。

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

了解WebSocket

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

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

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

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

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

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

WebSocket特點

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

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

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

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

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

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

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

WebSocket客戶端常用API

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

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

屬性

1.WebSocket.onopen

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

2.WebSocket.onmessage

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

3.WebSocket.onclose

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

4.WebSocket.onerror

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

方法

1.WebSocket.close()

關(guān)閉當前鏈接。

2.WebSocket.send(data)

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

客戶端舉例

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

常用的WebSocket服務(wù)端

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

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

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

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

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

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

客戶端

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.

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

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

服務(wù)端

這里使用的是Node.js。

nodejs-websocket：websocket服務(wù)器和客戶端的nodejs模塊。

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

項目一覽

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

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

客戶端?

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.

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

服務(wù)端

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

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

我們在云服務(wù)上啟動命令。

啟動成功!

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

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

那么，重啟云端服務(wù)器，看下效果。

項目一覽

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

結(jié)語

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


網(wǎng)站標題：沉寂了一周，我開發(fā)了一個聊天室
網(wǎng)頁地址：http://www.5511xx.com/article/ccoddds.html