基于node+vue实现简单的WebSocket聊天功能


Posted in Javascript onFebruary 01, 2020

首先,我需要用到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服务,

基于node+vue实现简单的WebSocket聊天功能

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

执行

yarn socket

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

<template>
 <div class="test3">
  <div class="msg" ref="box">
   <div v-for="item in list" :class="[item.type,'msg-item']">
    <p>
     {{item.content}}
    </p>
   </div>
  </div>
  <div class="input-group">
   <input type="text" v-model="contentText">
   <button @click="sendText">发送</button>
  </div>
 </div>
</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,当有修改的时候进行div的屏幕滚动,确保能看到最新的聊天
   list: function () {
    let that = this;
    setTimeout(() => {
     that.$refs.box.scrollTop = that.$refs.box.scrollHeight;
    }, 0);
    //加setTimeout的原因:由于vue采用虚拟dom,我每次生成新的消息时获取到的div的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>

看一下最终效果:

基于node+vue实现简单的WebSocket聊天功能

基于node+vue实现简单的WebSocket聊天功能

Javascript 相关文章推荐
让你的网站可编辑的实现js代码
Oct 19 Javascript
jquery foreach使用示例
Sep 12 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
vue-router 路由传参用法实例分析
Mar 06 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 #Javascript
node crawler如何添加promise支持
Feb 01 #Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 #Javascript
js获取本日、本周、本月的时间代码
Feb 01 #Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 #Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 #Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 #Javascript
You might like
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
javascript继承的六大模式小结
2015/04/13 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
JS常用知识点整理
2017/01/21 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
python写入xml文件的方法
2015/05/08 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
文员自我评价怎么写
2013/09/19 职场文书
解除劳动合同协议书
2014/04/14 职场文书
请病假条范文
2015/08/17 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书