Vue+Websocket簡單實現(xiàn)聊天功能

更新時間：2021年08月31日 12:06:29 作者：水香木魚

這篇文章主要為大家詳細介紹了Vue+Websocket簡單實現(xiàn)聊天功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue+Websocket簡單實現(xiàn)聊天功能的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

聊天室

此篇文章是針對Websocket的簡單了解和應用，利用Nodejs簡單搭建一個服務器加以實現(xiàn)。

首先創(chuàng)建一個vue項目

然后再創(chuàng)建一個server文件夾，在終端上打開該文件夾，輸入vue init（一直敲 "回車" 鍵），最后再建一個server.js文件，如下圖

代碼如下：

server.js/

在server文件終端下 npm install --s ws

var userNum = 0; //統(tǒng)計在線人數(shù)
var chatList = [];//記錄聊天記錄
var WebSocketServer = require('ws').Server;
wss = new WebSocketServer({ port: 8181 }); //8181 與前端相對應
//調(diào)用 broadcast 廣播，實現(xiàn)數(shù)據(jù)互通和實時更新
wss.broadcast = function (msg) {
    wss.clients.forEach(function each(client) {
        client.send(msg);
    });
};
wss.on('connection', function (ws) {
    userNum++;//建立連接成功在線人數(shù) +1
    wss.broadcast(JSON.stringify({ funName: 'userCount', users: userNum, chat: chatList })); //建立連接成功廣播一次當前在線人數(shù)
    console.log('Connected clients:', userNum);
    //接收前端發(fā)送過來的數(shù)據(jù)
    ws.on('message', function (e) {
        var resData = JSON.parse(e)
        console.log('接收到來自clent的消息：' + resData.msg)
        chatList.push({ userId: resData.userId, content: resData.msg });//每次發(fā)送信息，都會把信息存起來，然后通過廣播傳遞出去，這樣此每次進來的用戶就能看到之前的數(shù)據(jù)
        wss.broadcast(JSON.stringify({ userId: resData.userId, msg: resData.msg })); //每次發(fā)送都相當于廣播一次消息
 
    });
    ws.on('close', function (e) {
        userNum--;//建立連接關閉在線人數(shù) -1
        wss.broadcast(JSON.stringify({ funName: 'userCount', users: userNum, chat: chatList }));//建立連接關閉廣播一次當前在線人數(shù)
        console.log('Connected clients:', userNum);
        console.log('長連接已關閉')
    })
})
console.log('服務器創(chuàng)建成功')

然后npm run start啟動服務器

HelloWorld.vue(前端頁面)

<template>
  <div class="chat-box">
    <header>聊天室人數(shù)：{{count}}</header>
    <div class="msg-box" ref="msg-box">
      <div
        v-for="(i,index) in list"
        :key="index"
        class="msg"
        :style="i.userId == userId?'flex-direction:row-reverse':''"
      >
        <div class="user-head">
          <div
            class="head"
            :style="` background: hsl(${getUserHead(i.userId,'bck')}, 88%, 62%); clip-path:polygon(${getUserHead(i.userId,'polygon')}% 0,100% 100%,0% 100%); transform: rotate(${getUserHead(i.userId,'rotate')}deg)`"
          ></div>
        </div>
        <div class="user-msg">
          <span
            :style="i.userId == userId?' float: right;':''"
            :class="i.userId == userId?'right':'left'"
          >{{i.content}}</span>
        </div>
      </div>
    </div>
    <div class="input-box">
      <input type="text" ref="sendMsg" v-model="contentText" @keyup.enter="sendText()" />
      <div class="btn" :class="{['btn-active']:contentText}" @click="sendText()">發(fā)送</div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      ws: null,
      count: 0,
      userId: null, //當前用戶ID
      list: [], //聊天記錄的數(shù)組
      contentText: "" //input輸入的值
    };
  },
  created() {
    this.getUserID();
  },
  mounted() {
    this.initWebSocket();
  },
  methods: {
    //根據(jù)時間戳作為當前用戶ID
    getUserID() {
      let time = new Date().getTime();
      this.userId = time;
    },
    //根據(jù)userID生成一個隨機頭像
    getUserHead(id, type) {
      let ID = String(id);
      if (type == "bck") {
        return Number(ID.substring(ID.length - 3));
      }
      if (type == "polygon") {
        return Number(ID.substring(ID.length - 2));
      }
      if (type == "rotate") {
        return Number(ID.substring(ID.length - 3));
      }
    },
    //滾動條到底部
    scrollBottm() {
      let el = this.$refs["msg-box"];
      el.scrollTop = el.scrollHeight;
    },
    //發(fā)送聊天信息
    sendText() {
      let _this = this;
      _this.$refs["sendMsg"].focus();
      if (!_this.contentText) {
        return;
      }
      let params = {
        userId: _this.userId,
        msg: _this.contentText
      };
      _this.ws.send(JSON.stringify(params)); //調(diào)用WebSocket send()發(fā)送信息的方法
      _this.contentText = "";
      setTimeout(() => {
        _this.scrollBottm();
      }, 500);
    },
    //進入頁面創(chuàng)建websocket連接
    initWebSocket() {
      let _this = this;
      //判斷頁面有沒有存在websocket連接
      if (window.WebSocket) {
        // 192.168.0.115 是我本地IP地址 此處的 :8181 端口號 要與后端配置的一致
        let ws = new WebSocket("ws://192.168.0.115:8181");
        _this.ws = ws;
        ws.onopen = function(e) {
          console.log("服務器連接成功");
        };
        ws.onclose = function(e) {
          console.log("服務器連接關閉");
        };
        ws.onerror = function() {
          console.log("服務器連接出錯");
        };
        ws.onmessage = function(e) {
          //接收服務器返回的數(shù)據(jù)
          let resData = JSON.parse(e.data);
          if (resData.funName == "userCount") {
            _this.count = resData.users;
            _this.list = resData.chat;
            console.log(resData.chat);
          } else {
            _this.list = [
              ..._this.list,
              { userId: resData.userId, content: resData.msg }
            ];
          }
        };
      }
    }
  }
};
</script>
 
<style lang="scss" scoped>
.chat-box {
  margin: 0 auto;
  background: #fafafa;
  position: absolute;
  height: 100%;
  width: 100%;
  max-width: 700px;
  header {
    position: fixed;
    width: 100%;
    height: 3rem;
    background: #409eff;
    max-width: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: white;
    font-size: 1rem;
  }
  .msg-box {
    position: absolute;
    height: calc(100% - 6.5rem);
    width: 100%;
    margin-top: 3rem;
    overflow-y: scroll;
    .msg {
      width: 95%;
      min-height: 2.5rem;
      margin: 1rem 0.5rem;
      position: relative;
      display: flex;
      justify-content: flex-start !important;
      .user-head {
        min-width: 2.5rem;
        width: 20%;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background: #f1f1f1;
        display: flex;
        justify-content: center;
        align-items: center;
        .head {
          width: 1.2rem;
          height: 1.2rem;
        }
        // position: absolute;
      }
      .user-msg {
        width: 80%;
        // position: absolute;
        word-break: break-all;
        position: relative;
        z-index: 5;
        span {
          display: inline-block;
          padding: 0.5rem 0.7rem;
          border-radius: 0.5rem;
          margin-top: 0.2rem;
          font-size: 0.88rem;
        }
        .left {
          background: white;
          animation: toLeft 0.5s ease both 1;
        }
        .right {
          background: #53a8ff;
          color: white;
          animation: toright 0.5s ease both 1;
        }
        @keyframes toLeft {
          0% {
            opacity: 0;
            transform: translateX(-10px);
          }
          100% {
            opacity: 1;
            transform: translateX(0px);
          }
        }
        @keyframes toright {
          0% {
            opacity: 0;
            transform: translateX(10px);
          }
          100% {
            opacity: 1;
            transform: translateX(0px);
          }
        }
      }
    }
  }
  .input-box {
    padding: 0 0.5rem;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 3.5rem;
    background: #fafafa;
    box-shadow: 0 0 5px #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    input {
      height: 2.3rem;
      display: inline-block;
      width: 100%;
      padding: 0.5rem;
      border: none;
      border-radius: 0.2rem;
      font-size: 0.88rem;
    }
    .btn {
      height: 2.3rem;
      min-width: 4rem;
      background: #e0e0e0;
      padding: 0.5rem;
      font-size: 0.88rem;
      color: white;
      text-align: center;
      border-radius: 0.2rem;
      margin-left: 0.5rem;
      transition: 0.5s;
    }
    .btn-active {
      background: #409eff;
    }
  }
}
</style>

192.168.0.115是我本地的IP地址(默認是 localhost )，你可以改成你自己的

然后npm run dev，就可以實現(xiàn)局域網(wǎng)聊天了，有無線的話可以用手機連著無線訪問你的IP地址訪問，🙃沒的話可以試下多開幾個窗口，也是能看到效果的！！

進入聊天室時和發(fā)送信息時服務器的打印日志

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue實現(xiàn)綁定事件的方法實例代碼詳解
這篇文章主要介紹了vue實現(xiàn)綁定事件的方法實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-06-06
Vue中使用matomo進行訪問流量統(tǒng)計的實現(xiàn)
這篇文章主要介紹了Vue中使用matomo進行訪問流量統(tǒng)計的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-11-11
詳解vue 不同環(huán)境配置不同的打包命令
這篇文章主要介紹了詳解vue不同環(huán)境配置不同的打包命令，主要包括正式環(huán)境、測試環(huán)境和開發(fā)環(huán)境，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
vue中的data為什么是個函數(shù)而不是對象詳解
這篇文章主要介紹了vue中的data為什么是個函數(shù)而不是對象問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-04-04
electron-vite新一代electron開發(fā)構(gòu)建工具
這篇文章主要介紹了electron-vite新一代electron開發(fā)構(gòu)建工具，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
el-checkbox-group?的v-model無法綁定對象數(shù)組的問題解決
elementUI官方文檔中el-checkbox-group組件綁定的都為一維數(shù)組，本文主要介紹了解決el-checkbox-group?的v-model無法綁定對象數(shù)組，感興趣的可以了解一下
2023-05-05
vue+echarts實帶漸變效果的折線圖
這篇文章主要為大家詳細介紹了vue+echarts實帶漸變效果的折線圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
element-ui?el-table表格固定表頭代碼示例
Element-UI的el-table組件是一個非常強大的表格組件,它提供了多種常見的表格功能,如排序、篩選、分頁、自定義列模板等,這篇文章主要給大家介紹了關于element-ui?el-table表格固定表頭的相關資料,需要的朋友可以參考下
2024-05-05
Vue實現(xiàn)Excel本地下載及上傳的方法詳解
相信大家在項目中經(jīng)常會遇到一些上傳下載文件的相關功能。這篇文章將為大家介紹一下Vue實現(xiàn)Excel本地下載及上傳的示例代碼，需要的可以參考一下
2022-07-07
vue項目中的webpack-dev-sever配置方法
下面小編就為大家分享一篇vue項目中的webpack-dev-sever配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-12-12