技術標籤：前端vuevuenodejsjs前端websocket

碼字不易，有幫助的同學希望能關注一下我的微信公眾號：Code程式人生，感謝！程式碼自用自取。

上篇文章已經給大家介紹了使用原生JavaScript+Nodejs+WebSocket實現多人聊天室的內容。

這期的話，我們使用Vue2.x版本同樣使用Nodejs+WebSocket繼續實現多人聊天室功能。

因為上期已經很詳細的介紹了WebSocket的一些重要的事件處理函式，這期的話就不詳細介紹了。只是用Vue2.x的版本再做一下，感受一下區別。

首先我們應該使用VueCli新建一個Vue2.x版本的專案。
然後整理一下檔案目錄，刪除無用的內容。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/Login',
    name: 'Login',
    component: Login
  },
  {
    path: '/',
    name: 'Home'
 
,
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')
  }
]

const router = new VueRouter({
  mode: 'history'
 
,
  base: process.env.BASE_URL,
  routes
})

export default router

然後我們看一下檢視中的Login.vue。

<template>
  <div class="about">
    Login
    <input type="text" placeholder="請輸入使用者名稱"  v-model="username"/>
    <button @click='handleEnterBtnClick'>進入聊天室</button>
  </div>
</template>

<script>
export default {
  name:'Login',
  data () {
    return {
      username:''
    }
  },
  mounted () {
    const username = localStorage.getItem('username');

    if(username){
      this.$router.push('/');
      return;
    }
  },
  methods: {
    handleEnterBtnClick(){
      const username = this.username.trim();
      console.log(username);
      if(username.length < 6){
        alert('使用者名稱不能小於六位');
        return;
      }

      localStorage.setItem('username',username);
      this.$router.push('/');
    }
  }
}
</script>

這和之前的原生JavaScript版本的entry.html的作用一樣。

使用vue比原生JavaScript最明顯的區別就是不用操作dom了，減少了很多的操作。

Home.vue是聊天室的內容。

<template>
  <div class="home">
    <ul>
      <li v-for="item in msgList" :key="item.id">
        <p>
          <span>{{ item.user }}</span>
          <span>{{ new Date(item.dateTime) }}</span>
        </p>
        <p>訊息：{{item.msg}}</p>
      </li>
    </ul>
    <input type="text" placeholder="請輸入訊息"  v-model="msg"/>
    <button @click="handleSendBtnClick">傳送</button>
  </div>
</template>

<script>

const ws = new WebSocket('ws://localhost:8000');


export default {
  name: 'Home',
  data () {
    return {
      msg:'',
      username:'',
      msgList:[]
    }
  },
  mounted () {
    this.username = localStorage.getItem('username');

    if(!this.username){
      this.$router.push('/login');
      return;
    }

    ws.addEventListener('open',this.handleWsOpen.bind(this),false);
    ws.addEventListener('close',this.handleWsClose.bind(this),false);
    ws.addEventListener('error',this.handleWsError.bind(this),false);
    ws.addEventListener('message',this.handleWsMessage.bind(this),false);

  },
  methods: {
    handleSendBtnClick(){
      const msg = this.msg;
      if(!msg.trim().length){
        return;
      }

      ws.send(JSON.stringify({
        id: new Date().getTime(),
        user:this.username,
        dateTime:new Date().getTime(),
        msg:this.msg
      }))
      this.msg = '';  
    },
    handleWsOpen(e){
      console.log('FE:WebSocket open',e);
    },
    handleWsClose(e){
      console.log('FE:WebSocket close',e);
    },
    handleWsError(e){
      console.log('FE:WebSocket error',e);
    },
    handleWsMessage(e){
      // console.log(e);
      // console.log('FE:WebSocket message',e.data);
      const msg = JSON.parse(e.data);
      console.log(msg);
      this.msgList.push(msg);
    }
  }

}
</script>

和之前的原生JavaScript版本沒有太大的區別，最大的感受就是不用再操作dom了。

後端的話，我們就直接在根目錄新建一個server資料夾。

npm i ws -s

index.js內容：

const ws = require('ws');

const server = new ws.Server({
    port:8000
})

server.on('open',handleOpen);
server.on('close',handleClose);
server.on('error',handleError);
server.on('connection',handleConnection);

function handleOpen(){
    console.log('BE:WebSocket open');
}
function handleClose(){
    console.log('BE:WebSocket close');
}
function handleError(){
    console.log('BE:WebSocket error');
}
function handleConnection(e){
    console.log('BE:WebSocket connection');
    e.on('message',handleMessage);
}
function handleMessage(msg){
    console.log(msg);
    console.log(server.clients);
    server.clients.forEach((c)=> {
        c.send(msg);
    })
}

因為大部分的事件處理函式都和原生的JavaScript版本一模一樣，所以就不做過多的解釋了。大家可以直接複製程式碼體驗。

專案執行的結果和原生JavaScript一樣。

完整的原始碼檔案關注我的公眾號：Code程式人生，回覆關鍵字聊天室。

有微信小程式課設、畢設需求聯絡個人QQ：505417246

關注下面微信公眾號，可以領取微信小程式、Vue、TypeScript、前端、uni-app、全棧、Nodejs、Python等實戰學習資料
最新最全的前端知識總結和專案原始碼都會第一時間釋出到微信公眾號，請大家多多關注，謝謝！