nodejs router 返回html_Vue+Nodejs+WebSocket实现多人聊天室

点击上方蓝字关注我们

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

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

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

首先我们应该使用VueCli新建一个Vue2.x版本的项目。然后整理一下文件目录，删除无用的内容。

我们只用到两个视图，分别是Home和Login。main.js的内容不动。router文件夹的index.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。

views/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是聊天室的内容。

views/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文件夹，下载ws模块。

npm i ws -s

index.js内容：

server/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程序人生，回复关键字聊天室。

有帮助的同学可以点赞关注转发一下，谢谢！年底有抽奖活动。

往期推荐

原生JavaScript+WebSocket+nodejs实现聊天室功能

前端面试题之---Object.defineProperty(1)

在vue.config.js中模拟后端接口数据

Vue知识点总结(24)——使用VueCli创建一个项目(超级详细)

普本在校生是如何零基础在一个月内开发出第一款微信小程序的

点个在看你最好看