node+vue怎么实现简单的WebSocket聊天功能?(代码示例)

最近学习了一下websocket的即时通信,感觉非常的强大,这里我用node启动了一个服务进行websocket链接,然后再vue的view里面进行了链接,进行通信,废话不多说,直接上代码吧,首先,我

最近学习了一下websocket的即时通信,感觉非常的强大,这里我用node启动了一个服务进行websocket链接,然后再vue的view里面进行了链接,进行通信,废话不多说,直接上代码吧,

首先,我需要用到node的nodejs-websocket模块

使用yarn进行安装

yarn add nodejs-websocket --save

当然,你也可以用npm进行安装

npm i nodejs-websocket --save

安装完毕之后,我们开始写服务端的代码,首先,我用node在本地起了一个node服务器用来开启websocket服务

sock.js:

let ws = require("nodejs-websocket");console.log("开始建立链接");ws.createServer(function (conn) {  conn.on("text", function (str) {    console.log("收到的信息为", str);      conn.send(`${str}(机器人`)  });  conn.on("close", function (code, reason) {    console.log("关闭连接")  });  conn.on("error", function (code, reason) {    console.log("异常关闭")  })}).listen(8001);console.log("链接建立完毕");

服务端主要是用nodejs-websocket用来开启服务,以及返回前端需要的值,这里我只是做了一个简单的处理,在接受值得后面加了一个‘机器人’的string,

然后,我们需要开启这个node服务,

命令后面的路径一定要找对,我是把sock.js放在了根目录的socket文件夹下面

执行

yarn socket

最后,看我们的客户端,客户端我是想有一个输入框,然后有个聊天框:

<template>  <p class="test3">    <p class="msg" ref="box">      <p v-for="item in list" :class="[item.type,'msg-item']">        <p>          {{item.content}}        </p>      </p>    </p>    <p class="input-group">      <input type="text" v-model="contentText">      <button @click="sendText">发送</button>    </p>  </p></template><script>  export default {    name: "index3",    data() {      return {        list: [],//聊天记录的数组        contentText: "",//input输入的值      }    },    methods: {      //发送聊天信息       sendText() {        let that = this;        this.list = [...this.list, {type: "mine", content: this.contentText}];//通过type字段进行区分是自己(mine)发的还是系统(robot)返回的        this.backText(function () {          that.contentText = "";//加回调在得到返回数据的时候清除输入框的内容        });      },      backText(callback) {        let that = this;        if (window.WebSocket) {          let ws = new WebSocket("ws://192.168.11.169:8001");          ws.onopen = function (e) {            console.log("链接服务器成功");            console.log("that.contentText is", that.contentText);            ws.send(that.contentText);            callback();          };          ws.onclose = function (e) {            console.log("服务器关闭")          };          ws.onerror = function () {            console.log("服务器出错")          };          ws.onmessage = function (e) {            that.list = [...that.list, {type: "robot", content: e.data}]          }        }      }    },    watch: {      //监听list,当有修改的时候进行p的屏幕滚动,确保能看到最新的聊天      list: function () {        let that = this;        setTimeout(() => {          that.$refs.box.scrollTop = that.$refs.box.scrollHeight;        }, 0);        //加setTimeout的原因:由于vue采用虚拟dom,我每次生成新的消息时获取到的p的scrollHeight的值是生成新消息之前的值,所以造成每次都是最新的那条消息被隐藏掉了      }    },    mounted() {    }  };</script><style scoped lang="scss">  .test3 {    text-align: center;  }  .msg {    width: 100px;    height: 100px;    overflow: auto;    padding-top: 5px;    border: 1px solid red;    display: inline-block;    margin-bottom: 6px;    .msg-item {      position: relative;      overflow: hidden;      p {        display: inline-block;        border-radius: 40px;        background: #3C3D5A;        color: white;        float: left;        padding: 2px 12px;        margin: 0 0 2px 0;        max-width: 70%;        text-align: left;        box-sizing: border-box;      }      &.mine {        p {          float: right;          background: aquamarine;          color: white;        }      }    }  }</style>

  看一下最终效果:

相关推荐:

2020年前端vue面试题大汇总(附答案)

vue教程推荐:2020最新的5个vue.js视频教程精选

更多编程相关知识,请访问:编程教学!!

关于作者: 营销实力派

为您推荐

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注