vue手把手教学~搭建web聊天室-低调大师

vue手把手教学~搭建web聊天室

2020-07-29 741

💕看前三件事:

点赞 | 你可以 点击——>收藏——>退出一气呵成，但别忘了点赞🤭
关注 | 关注【小猴子的web成长之路】，下次不迷路😘
在看 | 点个在看，让更多小伙伴也看到哦😽

WebSocket简介

WebSocket是一种在单个TCP连接上进行全双工通信的协议

WebSocket使得客户端和服务器之间的数据交换变得更加简单，并且允许服务端主动向客户端推送数据。(HTTP协议的缺陷：通信只能由客户端发起)

使用WbeSocket，浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性连接(长连接)，并进行双向数据传输，并且能够实时的进行通讯

聊天室通讯还可以采用轮询的方式实现。所谓轮询就是客户端在特定时间间隔，由浏览器向服务器发送请求获得最新数据，这样会浪费很多带宽等资源

特点：

建立在 TCP 协议之上，服务器端的实现比较容易。
与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
数据格式比较轻量，性能开销小，通信高效。
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

使用WebSocket()构造函数来构造一个WebSocket

//注意是ws协议，不存在跨域问题,可以在本地启node服务户进行测试，在需要的时候换上后端服务器地址即可
var ws = new WebSocket('ws://localhost:8080');

API(常用):

[WebSocket.onclose]

用于指定连接关闭后的回调函数。

[WebSocket.onerror]

用于指定连接失败后的回调函数。

[WebSocket.onmessage]

用于指定当从服务器接受到信息时的回调函数。

[WebSocket.onopen]

用于指定连接成功后的回调函数。

[WebSocket.close([code[, reason\]])]

关闭当前链接。

code和reason可选

code状态码 reason可读字符串，解释关闭原因

[WebSocket.send(data)]

对要传输的数据进行排队。

SocketIO

为了兼容所有浏览器，SocketIO将WebSocket、AJAX和其它的通信方式全部封装成了统一的通信接口

Socket.IO 由两部分组成：

一个服务端用于集成 (或挂载) 到 Node.JS HTTP 服务器： socket.io
一个加载到浏览器中的客户端： socket.io-client

引入socket.io-client，可以创建一个全局的实例，便于在所有文件中使用

我个人认为socket.io的最大优点就在于可以自定义事件

通过emit发送消息，通过on监听事件

//引入http标准模块,CommonJS模块
const http = require("http");
const fs = require("fs");
const ws = require("socket.io");

//创建一个web服务
const server  = http.createServer(function(request,response){
  response.writeHead(200,{
    "Content-type":"text/html;charset=UTF-8"
  })
  // 读取文件
  const html = fs.readFileSync("index.html")
  response.end(html);
})
//基于创建的服务开启socket实例
const io = ws(server)

//检测连接事件
io.on("connection",function(socket){
  let nmae = '';
  //加入群聊
  socket.on("join",function(message){
    console.log(message)
    name = message.name
    //广播给其它客户端看(boradcast,除了自己以外的所有人)
    socket.broadcast.emit('joinNoticeOther',{
      name:name,
      action:'加入了群聊',
      count:count
    })
  })
  
  //接收客户端所发送的消息
  socket.on("message",function(message){
    console.log(message)
    //向所有客户端广播该消息
    io.emit("message",message)
  })
  //监听到断开链接
  socket.on("disconnect",function(){
    count--
    //发送广播  某用户离开了群聊
    io.emit("disconnection",{
      name:name,
      count:count
    })
  })
})

聊天室搭建

本次demo采用vue+WebSocket +java进行开发

创建实例

//从store中取出用户的id和name
this.userId = this.$store.getters.userInfo.userId;
this.name = this.$store.getters.userInfo.realName;
//根据用户的id建立各自的长连接
this.ws = new WebSocket(
    "ws://192.168.0.87:12137/websocket/" + this.userId
);
this.ws.onopen = function (evt) {
    //绑定连接事件
    if (evt.isTrusted) {
        //获取当前人数
        CountRoom().then((res)=>{
            $("#count").text(res);
        })
    }
    console.log("Connection open ...");
};
    var _this = this;
    this.scrollToBottom();


//滚动到底部
scrollToBottom() {
    this.$nextTick(() => {
        $(".chat-container").scrollTop($(".chat-container")[0].scrollHeight);
    });
},

断开连接

弹框提示，选择是否重连。重连时需要先手动断开连接

当发送的文件出错或者过大，可能会导致断开连接

当离开当前路由，组件销毁的时候，需要手动断开连接

// 断开连接回调事件
_this.ws.onclose = function (evt) {
    CountRoom().then((res)=>{
        $("#count").text(res);
    })
    if (evt.code === 1009) {
        _this.tipText = "发送的图片或者文件过大，请重新选择！";
    }
    _this.dialogVisible = true;
};
//连接失败后的回调
 _this.ws.onerror = function (evt) {
     console.log("Connection error.");
     if (evt.code === 1009) {
         _this.tipText = "连接失败，点击确定按钮尝试重连";
     }
     _this.dialogVisible = true;
 };
//点击弹出框确定按钮后
 handleOK() {
     this.dialogVisible = false;
     this.tipText = "出现未知错误，请点击确定按钮尝试重连";
     this.reconnet = true;
     let _this = this;
     if (this.reconnet) {
         //  window.location.reload(); 可以通过刷新页面来实现，但是体验很差
         this.ws.close();//手动关闭后再重新连接
         this.init(); //重连方法在init里
         _this.reconnet = false;
     }
 },
//组件销毁时，需要断开连接
destroyed(){
    this.ws.close();
    console.log("断开连接")
}

富文本聊天框

有很多富文本编辑器插件包括TinyMCE、Ckeditor、UEditor（百度）、wangEditor等

本项目中不需要用到太多功能，所有选择自己实现一个简单的富文本编辑器

可以粘贴文字或图片，对文本框中的图片进行压缩，展示的图片不压缩

选择文件发送，点击文件可以获取url，可以下载或是预览

传统的输入框都是使用 <textarea> 来制作的，它的优势是非常简单，但最大的缺陷却是无法展示图片。为了能够让输入框能够展示图片（富文本化），我们可以采用设置了 contenteditable="true" 属性的 <div> 来实现这里面的功能

 <div
      class="editor"
      :contenteditable="editFlag" //有时需要输入框处于不可编辑状态，采用标识，默认为true
      ref="editor"
      id="msg"
      @keyup="getCursor"
      @keydown.enter.prevent="submit"
      @paste.prevent="onPaste"
      @click="getCursor"
      ></div>

处理粘贴事件

任何通过“复制”或者 control + c 所复制的内容（包括屏幕截图）都会储存在剪贴板，在粘贴的时候可以在输入框的 onpaste 事件里面监听到。

而剪贴板的的内容则存放在 DataTransferItemList 对象中，可以通过 e.clipboardData.items 访问到:

//定义粘贴函数
const onPaste = (e, type) => {
  // 如果剪贴板没有数据则直接返回
  if (!(e.clipboardData && e.clipboardData.items)) {
    return;
  }
  // 用Promise封装便于将来使用
  return new Promise((resolve, reject) => {
    // 复制的内容在剪贴板里位置不确定，所以通过遍历来保证数据准确
    for (let i = 0, len = e.clipboardData.items.length; i < len; i++) {
      const item = e.clipboardData.items[i];
      // 文本格式内容处理
      if (item.kind === "string") {
        item.getAsString((str) => {
          resolve({ compressedDataUrl: str });
        });
      // 文件格式内容处理
      } else if (item.kind === "file") {
        const pasteFile = item.getAsFile();
        const imgEvent = {
          target: {
            files: [pasteFile],
          },
        };
        chooseImg(imgEvent, (url) => {
          resolve(url);
        });
      } else {
        reject(new Error("不支持粘贴该类型"));
      }
    }
  });
};

chooseImg对粘贴的图片或选择的图片进行处理，将其转化为base64字符串

canvas的toDataURL的方法只能保存img/png或者img/jpeg格式的，如果格式不对话默认转成img/png

我开始想着把默认格式的img/png替换成img/gif，来展示gif图但实际上不行，因为toDataURL只转换了一帧

暂时没想到好的办法将gif图转成base64

/**
 * 预览函数
 *
 * @param {*} dataUrl base64字符串
 * @param {*} cb 回调函数
 */
function toPreviewer(dataUrl, cb) {
  cb && cb(dataUrl);
}

/**
 * 图片压缩函数
 *
 * @param {*} img 图片对象
 * @param {*} fileType  图片类型
 * @param {*} maxWidth 图片最大宽度
 * @returns base64字符串
 */
function compress(img, fileType, maxWidth, type) {
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");

  const proportion = img.width / img.height;
  let width = img.width;
  let height = img.height;
  //根据type来判断，是否对图片进行压缩
  if (type) {
    //压缩后用于展示于输入框中
    width = maxWidth;
    height = maxWidth / proportion;
  }
  canvas.width = width;
  canvas.height = height;

  ctx.fillStyle = "#fff";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, 0, 0, width, height);

  const base64data = canvas.toDataURL(fileType, 0.75);

  //替换
  if (fileType === "image/gif") {
    let regx = /(?<=data:image).*?(?=;base64)/;
    let base64dataGif = base64data.replace(regx, "/gif");

    canvas = ctx = null;

    return base64dataGif;
  } else {
    canvas = ctx = null;

    return base64data;
  }
}

/**
 * 选择图片函数
 *
 * @param {*} e input.onchange事件对象
 * @param {*} cb 回调函数
 * @param {number} [maxsize=200 * 1024] 图片最大体积
 */
function chooseImg(e, cb, maxsize = 300 * 1024) {
  const file = e.target.files[0];

  if (!file || !/\/(?:jpeg|jpg|png|gif)/i.test(file.type)) {
    console.log("图片格式错误!");
    return;
  }

  const reader = new FileReader();
  reader.onload = function () {
    const result = this.result;
    let img = new Image();

    img.onload = function () {
      const compressedDataUrl = compress(img, file.type, maxsize / 1024, true);
      const noCompressRes = compress(img, file.type, maxsize / 1024, false);
      toPreviewer({ compressedDataUrl, noCompressRes }, cb);
      img = null;
    };
    img.src = result;
  };

  reader.readAsDataURL(file);
}

获取光标和设置光标的位置，便于插入内容

/**
 * 获取光标位置
 * @param {DOMElement} element 输入框的dom节点
 * @return {Number} 光标位置
 */
const getCursorPosition = (element) => {
  let caretOffset = 0;
  const doc = element.ownerDocument || element.document;
  const win = doc.defaultView || doc.parentWindow;
  const sel = win.getSelection();
  if (sel.rangeCount > 0) {
    const range = win.getSelection().getRangeAt(0);
    const preCaretRange = range.cloneRange();
    preCaretRange.selectNodeContents(element);
    preCaretRange.setEnd(range.endContainer, range.endOffset);
    caretOffset = preCaretRange.toString().length;
  }
  return caretOffset;
};


/**
 * 设置光标位置
 * @param {DOMElement} element 输入框的dom节点
 * @param {Number} cursorPosition 光标位置的值
 */
const setCursorPosition = (element, cursorPosition) => {
  const range = document.createRange();
  range.setStart(element.firstChild, cursorPosition);
  range.setEnd(element.firstChild, cursorPosition);
  const sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
};

    //在vue的methods中
    //粘贴内容至文本框
    async onPaste(e) {
        const result = await onPaste(e, true);
        this.resultOfBase64 = result.noCompressRes;
        const imgRegx = /^data:image\/png|jpg|jpeg|gif;base64,/;
        if (imgRegx.test(result.compressedDataUrl)) {
            document.execCommand("insertImage", false, result.compressedDataUrl);
        } else {
            document.execCommand("insertText", false, result.compressedDataUrl);
        }
    },
    //获取光标位置
    getCursor() {
        this.cursorPosition = getCursorPosition(this.editor);
    },

这里来了解一下document.execCommand这个API

当一个HTML文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。

参数：

aCommandName:一个 DOMString ，命令的名称，比如代码中的insertImage就是代表插入图片，insertText就是代表插入文本

aShowDefaultUI:一个 Boolean，是否展示用户界面，一般为 false。Mozilla 没有实现。

aValueArgument:一些命令（例如insertImage）需要额外的参数（insertImage需要提供插入image的url），默认为null。

发送消息

//存this
let _this = this;
this.ws.onmessage = function (message) {
    console.log(message);
    // console.log(_this.name);
    var data = message.data;
    //第一次连接成功的时候，后台发送的数据是字符串
    if (data !== "连接成功") {
        var result = JSON.parse(data);
    }
    let html = "";
    let answer = "";
    let date = new Date();
    let nowTime = date.getHours() + ":" + date.getMinutes();
    //将需要的数据，push到一个数组里，在页面上通过遍历数组渲染
    if (result) {
        _this.messageList.push({
            nowTime: nowTime,
            name: result.name, 
            msg: result.msg,
            id: result.id,
            elImg: result.elImg,//图片标识
            type: result.type,//消息分为三种类型，文本、图片、文件
            url: result.url,//文件的地址
        });
        _this.scrollToBottom();
    }
};

//发送消息
 submit(e, url) {
     const value =
           typeof e === "string"
     ? e.replace(/[\n\r]$/, "")
     : e.target.innerHTML.replace(/[\n\r]$/, "");
     const imgRegx = /^data:image\/png|jpg|jpeg|gif;base64,/;
     const imgFlag = imgRegx.test(this.resultOfBase64);
     // console.log("resultOfBase64:" + this.resultOfBase64)
     let imgValue = "";
     if (imgFlag && value !== "") {//判断是图片并且输入框中内容不为空
         imgValue = this.resultOfBase64.replace(/[\n\r]$/, "");
         this.type = 2;
     } else if (value && url) {//通过url来区分是文件还是文本
         this.type = 3;
     } else if (value) {
         this.type = 1;
     }
     if (value) {
         const message = {
             id: this.userId,
             name: this.name,
             msg: value,
             elImg: imgValue,
             type: this.type, //1--文本  2--图片 3--文件
             url: url,
         };
         // console.log(JSON.stringify(message));
         // 通过socket发送消息
         this.ws.send(JSON.stringify(message));
         if (typeof e === "string") {
             document.getElementById("msg").innerHTML = "";
             document.getElementById("msg").innerText = "";
         } else {
             e.target.innerText = "";
             e.target.innerHTML = "";
         }
         this.resultOfBase64 = "";
         this.editFlag = true;
     }
 },

选择图片

 <div class="sendFile">
    <i class="el-icon-picture"></i>
    <input
    type="file"
    id="file"
    title="选择图片"
    accept="image/png, image/jpeg, image/gif, image/jpg"
    @change="getFile"
    @click="getFocus"
    />
//压缩图片
    chooseFile(e) {
      return new Promise((resolve, reject) => {
        const pasteFile = e.target.files[0];
        const imgEvent = {
          target: {
            files: [pasteFile],
          },
        };
        chooseImg(imgEvent, (url) => {
          resolve(url);
        });
      });
    },
    //选择图片类文件
    getFile(e) {
      // const result = this.chooseFile(e)
      this.chooseFile(e).then((res) => {
        const result = res;
        this.resultOfBase64 = result.noCompressRes;
        const imgRegx = /^data:image\/png|jpg|jpeg|gif;base64,/;

        if (imgRegx.test(result.compressedDataUrl)) {
          document.execCommand("insertImage", false, result.compressedDataUrl);
        } else {
          document.execCommand("insertText", false, result.compressedDataUrl);
        }
      });
    },

选择文件

文件框是自己写的div和样式，直接放在输入框中会导致输入错位，所以选择直接调用submit方法发送

 
    <el-upload
    class="upload-demo chooseFile"
    action="http://192.168.0.232:9001/zuul/web/file/simpleUpload"
    multiple
    :on-change="onChange"
    >
        <i class="el-icon-folder-opened"></i>
    </el-upload>

 //自动获取焦点
    getFocus() {
      document.getElementById("msg").focus();
    },
    //选择文件的onchange事件
    onChange(e) {
      if (e.status == "success") {
        this.fileName = e.response.data.name;
        this.fileUrl = "uploadBaseUrl" + e.response.data.url;
        this.getCursor();
        this.getFocus();
        document.execCommand(
          "insertHTML",
          false,
          ` <div class="fileBox">
              <div class = "imgcover"></div>
              <div>${this.fileName}</div>
            </div>`
        );
        this.editFlag = true;
        var edit = document.getElementById("msg");
        //调用submit方法直接发送，不显示再输入框中
        this.submit(edit.innerHTML, this.fileUrl);
      } else if (e.status == "fail") {
        this.$message.error("发送文件失败，请重试！");
      }
    },
    //文件预览或下载
    PreviewFile(url) {
      //TOOD(window.open...)
      console.log(url);
    }

通过type判断，当前的文件类型，用不同的方式进行渲染

文本直接采用v-html解析

图片采用elementUI中的el-image渲染，点击可以预览没压缩的图片，也就是初始图片

文件也采用v-html渲染，加入点击事件

  <div class="chat-container">
          <div class="userMessage" v-for="(item,index) in messageList" :key="index">
            <div class="time">{{item.nowTime}}</div>
            <div :class="userId === item.id ? 'message-self':'message-other'">
              <div class="message-container">
                <div class="icon" v-if="userId !== item.id">
                  <img :src="userIcon" />
                </div>
                <div class="message-content">
                  <div class="speaker-name">{{item.name}}</div>
                  <div class="message" v-if="item.type===1" v-html="item.msg"></div>
                  <div class="message" v-else-if="item.type === 2 ">
                    <el-image
                      style="width: 300px; height: 200px"
                      :src="item.elImg"
                      :preview-src-list="[item.elImg]"
                      :lazy="true"
                    ></el-image>
                  </div>
                  <div
                    class="message PreviewFile"
                    v-else-if="item.type===3"
                    v-html="item.msg"
                    @click="PreviewFile(item.url)"
                  ></div>
                </div>
                <div class="icon" v-if="userId === item.id">
                  <img :src="userIcon" />
                </div>
              </div>
            </div>
          </div>
        </div>

效果图大致如下：

点击留言

历史好文推荐：

1、【整理分享】你需要的资源(更新版)

2、项目实战之接口处理篇~一文搞定接口请求

3、项目实战之本地存储篇

4、35个前端常用工具函数，建议收藏

5、【万字长文】史上最强vue总结，更新版

  
    
  
  
  
   
     
   
   
   
   
   ❤️爱心三连击
   
     
   
   
   1.看到这里了就点个在看支持下吧，你的「在看」是我创作的动力。
   
     
   
   
   2.关注公众号小猴子的web成长之路，「一起玩转前端」！
   
     
   
   
   3.特殊阶段，带好口罩，做好个人防护。
   
     
   
   
   4.可以添加我微信【monkeysoftweb】，拉你进技术交流群一起学习。
   
     
   
   
   
   
     
   
   
   

  
    
  
  
  
  
    
  
  
  
   
     
   
   
   
    
      
    
    
    
     
       
     
     
     
      
        
      
      
      
       
         
       
       
        
         
          
           
            
             
              
             
             
             “在看转发”是最大的支持

本文分享自微信公众号 - 小猴子的web成长之路（monkeysoftwafe）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

微信关注我们

原文链接：https://my.oschina.net/monkeysoft/blog/4449786

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

详解匈牙利算法与二分图匹配

点击上方蓝字，关注并星标，和我一起学技术。今天是算法与数据结构专题的第31篇文章，我们一起来聊聊二分图匹配与匈牙利算法。在上一篇文章当中我们介绍了一个有趣的稳定婚姻问题，模拟了男男女女配对的婚恋场景，并且研究了一下让匹配更加稳定的Gale-Shapley算法。如果错过了这篇文章的同学可以从下方的传送门回顾一下婚姻稳定问题的具体内容。学算法还能指导找对象？是的，这就是大名鼎鼎的稳定婚姻算法在上一篇文章的末尾我们曾经提到过，婚姻匹配问题本质上来说其实是二分图匹配的问题。那么什么又是二分图匹配呢？二分图匹配的问题又该通过什么算法来解决呢？下面就让我们一起从最基础的概念开始。二分图匹配二分图的概念很简单，就是在一个无向图当中，所有的点可以分成两个子集。这两个子集当中的点各自互不相交，并且图当中的所有边关联的顶点都属于两个不同的集合。单纯用语言描述有一点吃力，其实我们找一张图看一下就明白了。在上图当中很明显左边的竖着的三个点是一个集合，右边竖着的三个点是另外一个集合。两个集合之间有边相连，集合内部互不连通。匹配与最大匹配在二分图当中，如果我们选择了一条边就会连通对应的两个点。这...

2020-07-29

833

“递归函数就是函数内部调用自身，可以使代码逻辑更加易懂。但是递归也有坑，需要避免。” 13.1 概念在函数内部，可以调用其他函数。如果一个函数在内部调用自身，这个函数就是递归函数。理论上，所有的递归函数都可以写成循环的方式，但循环的逻辑不如递归清晰。计算阶乘n! = 1 x 2 x 3 x ... x n，用函数fact(n)表示： def fact(n): if n==1: return 1 return n * fact(n - 1) 13.2 写递归代码的套路写递归代码的关键就是找到如何将大问题分解为小问题的规律，然后按照下面套路即可实现：第一步，写出递推公式以计算阶乘为例，递归公式是：fact(n)=n!=n×(n−1)×⋅⋅⋅3×2×1=n×(n−1)!=n×fact(n−1) 第二步，推敲终止条件以计算阶乘为例，终止条件是n=1时，fact(1)=1。 13.2.1 斐波那契数列再来看一个斐波那契数列的例子，斐波那契数列中后一个元素是前两个相邻元素的和。比如： 0，1，1，2，3，5，8，13，21，34，55，…。那么我们如何得到第n个数是多少？分两步走...

2020-07-29

638

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。