[[381137]]

 前言

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

了解WebSocket

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

我們首先來(lái)引用阮一峰大佬的一篇文章一段話：

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

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

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

WebSocket 協(xié)議在2008年誕生，2011年成為國(guó)際標(biāo)準(zhǔn)。

WebSocket特點(diǎn)

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

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

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

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

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

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

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

WebSocket客戶端常用API

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

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

屬性

1.WebSocket.onopen

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

2.WebSocket.onmessage

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

3.WebSocket.onclose

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

4.WebSocket.onerror

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

方法

1.WebSocket.close()

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

2.WebSocket.send(data)

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

客戶端舉例

// Create WebSocket connection. 
const socket = new WebSocket('ws://localhost:8080'); // 這里的地址是服務(wù)器的websocket服務(wù)地址 
 
// Connection opened 
socket.onopen = function(evt) {  
  console.log("Connection open ...");  
  ws.send("Hello WebSockets!"); 
}; 
 
// Listen for messages 
socket.onmessage = function(evt) { 
  console.log( "Received Message: " + evt.data); 
  socket.close(); 
}; 
 
// Connection closed 
socket.onclose = function(evt) { 
  console.log("Connection closed."); 
}; 

常用的WebSocket服務(wù)端

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

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

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

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

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

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

客戶端

<template> 
  <div class="home"> 
    <div class="count"> 
      <p>在線人數(shù)：{{ count }}</p> 
    </div> 
    <div class="content"> 
      <div class="chat-box" ref="chatBox"> 
        <div 
          v-for="(item, index) in chatArr" 
          :key="index" 
          class="chat-item" 
        > 
          <div v-if="item.name === name" class="chat-msg mine"> 
            <p class="msg mineBg">{{ item.txt }}</p> 
            <p class="user" :style="{ background: bg }"> 
              {{ item.name.substring(item.name.length - 5, item.name.length) }} 
            </p> 
          </div> 
          <div v-else class="chat-msg other"> 
            <p class="user" :style="{ background: item.bg }"> 
              {{ item.name.substring(item.name.length - 5, item.name.length) }} 
            </p> 
            <p class="msg otherBg">{{ item.txt }}</p> 
          </div> 
        </div> 
      </div> 
    </div> 
    <div class="footer"> 
      <textarea 
        placeholder="說(shuō)點(diǎn)什么..." 
        v-model="textValue" 
        autofocus 
        ref="texta" 
        @keyup.enter="send" 
      ></textarea> 
      <div class="send-box"> 
        <p class="send active" @click="send">發(fā)送</p> 
      </div> 
    </div> 
  </div> 
</template> 
 
<script> 
import { onMounted, onUnmounted, ref, reactive, nextTick } from "vue"; 
export default { 
  name: "Home", 
  setup() { 
    let socket = null; 
    const path = "ws://localhost:3000/"; // 本地服務(wù)器地址 
    const textValue = ref(""); 
    const chatBox = ref(null); 
    const texta = ref(null); 
    const count = ref(0); 
    const name = new Date().getTime().toString(); 
    const bg = randomRgb(); 
    const chatArr = reactive([]); 
    function init() { 
      if (typeof WebSocket === "undefined") { 
        alert("您的瀏覽器不支持socket"); 
      } else { 
        socket = new WebSocket(path); 
        socket.onopen = open; 
        socket.onerror = error; 
        socket.onclose = closed; 
        socket.onmessage = getMessage; 
        window.onbeforeunload = function(e) { 
          e = e || window.event; 
          if (e) { 
            e.returnValue = "關(guān)閉提示"; 
            socket.close(); 
          } 
          socket.close(); 
          return "關(guān)閉提示"; 
        }; 
      } 
    } 
    function open() { 
      alert("socket連接成功"); 
    } 
    function error() { 
      alert("連接錯(cuò)誤"); 
    } 
    function closed() { 
      alert("socket關(guān)閉"); 
    } 
    async function getMessage(msg) { 
      if (typeof JSON.parse(msg.data) === "number") { 
        console.log(JSON.parse(msg.data)); 
        count.value = msg.data; 
      } else { 
        const obj = JSON.parse(msg.data); 
        chatArr.push(obj); 
      } 
      await nextTick(); 
      chatBox.value.scrollTop = chatBox.value.scrollHeight; 
    } 
    function randomRgb() { 
      let R = Math.floor(Math.random() * 130 + 110); 
      let G = Math.floor(Math.random() * 130 + 110); 
      let B = Math.floor(Math.random() * 130 + 110); 
      return "rgb(" + R + "," + G + "," + B + ")"; 
    } 
    function send() { 
      if (textValue.value.trim().length > 0) { 
        const obj = { 
          name: name, 
          txt: textValue.value, 
          bg: bg, 
        }; 
        socket.send(JSON.stringify(obj)); 
        textValue.value = ""; 
        texta.value.focus(); 
      } 
    } 
    function close() { 
      alert("socket已經(jīng)關(guān)閉"); 
    } 
    onMounted(() => { 
      init(); 
    }); 
    onUnmounted(() => { 
      socket.onclose = close; 
    }); 
    return { 
      send, 
      textValue, 
      chatArr, 
      name, 
      bg, 
      chatBox, 
      texta, 
      randomRgb, 
      count, 
    }; 
  }, 
}; 
</script> 

至于樣式文件，這里我也貼出來(lái)。

html,body{ 
  background-color: #e8e8e8; 
  user-select: none; 
} 
::-webkit-scrollbar { 
  width: 8px; 
  height: 8px; 
  display: none; 
} 
::-webkit-scrollbar-thumb { 
  background-color: #D1D1D1; 
  border-radius: 3px; 
  -webkit-border-radius: 3px; 
  border-left: 2px solid transparent; 
  border-top: 2px solid transparent; 
} 
*{ 
  margin: 0; 
  padding: 0; 
} 
.mine { 
  justify-content: flex-end; 
} 
.other { 
  justify-content: flex-start; 
} 
.mineBg { 
  background: #98e165; 
} 
.otherBg { 
  background: #fff; 
} 
.home { 
  position: fixed; 
  top: 0; 
  left: 50%; 
  transform: translateX(-50%); 
  width: 100%; 
  height: 100%; 
  min-width: 360px; 
  min-height: 430px; 
  box-shadow: 0 0 24px 0 rgb(19 70 80 / 25%); 
} 
.count{ 
  height: 5%; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background: #EEEAE8; 
  font-size: 16px; 
} 
.content { 
  width: 100%; 
  height: 80%; 
  background-color: #f4f4f4; 
  overflow: hidden; 
} 
.footer { 
  position: fixed; 
  bottom: 0; 
  width: 100%; 
  height: 15%; 
  background-color: #fff; 
} 
.footer textarea { 
  width: 100%; 
  height: 50%; 
  background: #fff; 
  border: 0; 
  box-sizing: border-box; 
  resize: none; 
  outline: none; 
  padding: 10px; 
  font-size: 16px; 
} 
.send-box { 
  display: flex; 
  height: 40%; 
  justify-content: flex-end; 
  align-items: center; 
} 
.send { 
  margin-right: 20px; 
  cursor: pointer; 
  border-radius: 3px; 
  background: #f5f5f5; 
  z-index: 21; 
  font-size: 16px; 
  padding: 8px 20px; 
} 
.send:hover { 
  filter: brightness(110%); 
} 
.active { 
  background: #98e165; 
  color: #fff; 
} 
.chat-box { 
  height: 100%; 
  padding:0 20px; 
  overflow-y: auto; 
} 
.chat-msg { 
  display: flex; 
  align-items: center; 
} 
.user { 
  font-weight: bold; 
  color: #fff; 
  position: relative; 
  word-wrap: break-word; 
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); 
  width: 60px; 
  height: 60px; 
  line-height: 60px; 
  border-radius:8px ; 
  text-align: center; 
} 
.msg { 
  margin: 0 5px; 
  max-width: 74%; 
  white-space: normal; 
  word-break: break-all; 
  color: #333; 
  border-radius: 8px; 
  padding: 10px; 
  text-align: justify; 
  font-size: 16px; 
  box-shadow: 0px 0px 10px #f4f4f4; 
} 
.chat-item { 
  margin: 20px 0; 
  animation: up-down 1s both; 
} 
@keyframes up-down { 
  0% { 
    opacity: 0; 
    transform: translate3d(0, 20px, 0); 
  } 
 
  100% { 
    opacity: 1; 
    transform: none; 
  } 
} 

服務(wù)端

這里使用的是Node.js。

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

const ws = require("nodejs-websocket"); 
const server = ws.createServer((conn) => { 
  conn.on("text", (str) => { 
    broadcast(str); 
  }); 
  conn.on("error", (err) => { 
    console.log(err); 
  }); 
}); 
server.listen(3000, function () { 
  console.log("open"); 
}); 
// 群發(fā)消息 
function broadcast(data) { 
  server.connections.forEach((conn) => { 
    conn.sendText(data); 
  }); 
} 

項(xiàng)目一覽

在線人數(shù)為零，這不是bug，是因?yàn)楫?dāng)時(shí)在本地端沒(méi)有做，只是放上了這個(gè)版塊。不過(guò)，在云服務(wù)端我已經(jīng)放上了這個(gè)功能。那么，我們來(lái)看一下吧。

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

客戶端‍

<template> 
  <div class="home"> 
    <div class="count"> 
      <p>在線人數(shù)：{{ count }}</p> 
    </div> 
    <div class="content"> 
      <div class="chat-box" ref="chatBox"> 
        <div 
          v-for="(item, index) in chatArr" 
          :key="index" 
          class="chat-item" 
        > 
          <div v-if="item.name === name" class="chat-msg mine"> 
            <p class="msg mineBg">{{ item.txt }}</p> 
            <p class="user" :style="{ background: bg }"> 
              {{ item.name.substring(item.name.length - 5, item.name.length) }} 
            </p> 
          </div> 
          <div v-else class="chat-msg other"> 
            <p class="user" :style="{ background: item.bg }"> 
              {{ item.name.substring(item.name.length - 5, item.name.length) }} 
            </p> 
            <p class="msg otherBg">{{ item.txt }}</p> 
          </div> 
        </div> 
      </div> 
    </div> 
    <div class="footer"> 
      <textarea 
        placeholder="說(shuō)點(diǎn)什么..." 
        v-model="textValue" 
        autofocus 
        ref="texta" 
        @keyup.enter="send" 
      ></textarea> 
      <div class="send-box"> 
        <p class="send active" @click="send">發(fā)送</p> 
      </div> 
    </div> 
  </div> 
</template> 
 
<script> 
import { onMounted, onUnmounted, ref, reactive, nextTick } from "vue"; 
export default { 
  name: "Home", 
  setup() { 
    let socket = null; 
    const path = "wss:/xxx.com/wsline/"; // 這個(gè)網(wǎng)址只是測(cè)試網(wǎng)址，這里只是說(shuō)明云服務(wù)地址 
    const textValue = ref(""); 
    const chatBox = ref(null); 
    const texta = ref(null); 
    const count = ref(0); 
    const name = new Date().getTime().toString(); 
    const bg = randomRgb(); 
    const chatArr = reactive([]); 
    function init() { 
      if (typeof WebSocket === "undefined") { 
        alert("您的瀏覽器不支持socket"); 
      } else { 
        socket = new WebSocket(path); 
        socket.onopen = open; 
        socket.onerror = error; 
        socket.onclose = closed; 
        socket.onmessage = getMessage; 
        window.onbeforeunload = function(e) { 
          e = e || window.event; 
          if (e) { 
            e.returnValue = "關(guān)閉提示"; 
            socket.close(); 
          } 
          socket.close(); 
          return "關(guān)閉提示"; 
        }; 
      } 
    } 
    function open() { 
      alert("socket連接成功"); 
    } 
    function error() { 
      alert("連接錯(cuò)誤"); 
    } 
    function closed() { 
      alert("socket關(guān)閉"); 
    } 
    async function getMessage(msg) { 
      if (typeof JSON.parse(msg.data) === "number") { 
        console.log(JSON.parse(msg.data)); 
        count.value = msg.data; 
      } else { 
        const obj = JSON.parse(msg.data); 
        chatArr.push(obj); 
      } 
      await nextTick(); 
      chatBox.value.scrollTop = chatBox.value.scrollHeight; 
    } 
    function randomRgb() { 
      let R = Math.floor(Math.random() * 130 + 110); 
      let G = Math.floor(Math.random() * 130 + 110); 
      let B = Math.floor(Math.random() * 130 + 110); 
      return "rgb(" + R + "," + G + "," + B + ")"; 
    } 
    function send() { 
      if (textValue.value.trim().length > 0) { 
        const obj = { 
          name: name, 
          txt: textValue.value, 
          bg: bg, 
        }; 
        socket.send(JSON.stringify(obj)); 
        textValue.value = ""; 
        texta.value.focus(); 
      } 
    } 
    function close() { 
      alert("socket已經(jīng)關(guān)閉"); 
    } 
    onMounted(() => { 
      init(); 
    }); 
    onUnmounted(() => { 
      socket.onclose = close; 
    }); 
    return { 
      send, 
      textValue, 
      chatArr, 
      name, 
      bg, 
      chatBox, 
      texta, 
      randomRgb, 
      count, 
    }; 
  }, 
}; 
</script> 

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

服務(wù)端

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

const fs = require("fs"); 
const httpServ = require("https"); 
const WebSocketServer = require("ws").Server; // 引用Server類 
 
const cfg = { 
  port: 3456, 
  ssl_key: "../../https/xxx.key", // 配置https所需的文件2 
  ssl_cert: "../../https/xxx.crt", // 配置https所需的文件1 
}; 
 
// 創(chuàng)建request請(qǐng)求監(jiān)聽(tīng)器 
const processRequest = (req, res) => { 
  res.writeHead(200); 
  res.end("Websocket linked successfully"); 
}; 
 
const app = httpServ 
  .createServer( 
    { 
      // 向server傳遞key和cert參數(shù) 
      key: fs.readFileSync(cfg.ssl_key), 
      cert: fs.readFileSync(cfg.ssl_cert), 
    }, 
    processRequest 
  ) 
  .listen(cfg.port); 
 
// 實(shí)例化WebSocket服務(wù)器 
const wss = new WebSocketServer({ 
  server: app, 
}); 
// 群發(fā) 
wss.broadcast = function broadcast(data) { 
    wss.clients.forEach(function each(client) { 
      client.send(data); 
    }); 
}; 
// 如果有WebSocket請(qǐng)求接入，wss對(duì)象可以響應(yīng)connection事件來(lái)處理 
wss.on("connection", (wsConnect) => { 
  console.log("Server monitoring"); 
  wss.broadcast(wss._server._connections); 
  wsConnect.on("message", (message) => { 
    wss.broadcast(message); 
  }); 
  wsConnect.on("close", function close() { 
    console.log("disconnected"); 
    wss.broadcast(wss._server._connections); 
  }); 
}); 

我們?cè)谠品?wù)上啟動(dòng)命令。

啟動(dòng)成功!

 

這里還沒(méi)有結(jié)束，因?yàn)槟闶褂玫氖莍p地址端口，必須轉(zhuǎn)發(fā)到域名上。所以我使用的nginx進(jìn)行轉(zhuǎn)發(fā)，配置如下參數(shù)。

location /wsline/ { 
     proxy_pass https://xxx:3456/; 
     proxy_http_version 1.1; 
     proxy_set_header Upgrade $http_upgrade; 
     proxy_set_header Connection "Upgrade"; 
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
     proxy_set_header Host $http_host; 
     proxy_set_header X-Real-IP $remote_addr; 
     proxy_set_header X-Forwarded-Proto https; 
     proxy_redirect off; 
} 

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

項(xiàng)目一覽

 

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

結(jié)語(yǔ)

謝謝閱讀，希望我沒(méi)有浪費(fèi)你的時(shí)間。看完文章了，那么趕快行動(dòng)起來(lái)吧，開(kāi)發(fā)一款屬于自己的聊天室。