Vue+Nodejs+WebSocket实现多人聊天室

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。

上篇文章已经给大家介绍了使用原生JavaScript+Nodejs+WebSocket实现多人聊天室的内容。

这期的话，我们使用Vue2.x版本同样使用Nodejs+WebSocket继续实现多人聊天室功能。

因为上期已经很详细的介绍了WebSocket的一些重要的事件处理函数，这期的话就不详细介绍了。只是用Vue2.x的版本再做一下，感受一下区别。

首先我们应该使用VueCli新建一个Vue2.x版本的项目。
然后整理一下文件目录，删除无用的内容。
在这里插入图片描述
我们只用到两个视图，分别是Home和Login。
main.js的内容不动。
router文件夹的index.js稍微改一下路由：

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);
    })
}