基于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 相关文章推荐
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 Javascript
vue router demo详解
Oct 13 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
node.js +mongdb实现登录功能
Jun 18 Javascript
Openlayers实现测量功能
Sep 25 Javascript
详解uniapp的全局变量实现方式
Jan 11 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的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
jquery的Theme和Theme Switcher使用小结
2010/09/08 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
jquery实现倒计时小应用
2017/09/19 jQuery
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
Python装饰器decorator用法实例
2014/11/10 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
房产继承公证书
2014/04/09 职场文书
目标管理责任书
2014/04/15 职场文书
禁烟标语大全
2014/06/11 职场文书
小学假期安全广播稿
2014/09/28 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
MYSQL如何查看操作日志详解
2022/05/30 MySQL