基于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 相关文章推荐
JavaScript中for-in遍历方式示例介绍
Feb 11 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
JS如何生成动态列表
Sep 22 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中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
laravel学习教程之存取器
2016/07/30 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
仅利用30行Python代码来展示X算法
2015/04/01 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
python 编写简单网页服务器的实例
2018/06/01 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
Python高级property属性用法实例分析
2019/11/19 Python
python爬取youtube视频的示例代码
2021/03/03 Python
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
应届毕业生个人求职自荐信
2014/01/06 职场文书
社区春季防火方案
2014/06/02 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书