vue基于websocket如何实现智能聊天及吸附动画效果

这篇“Vue基于websocket如何实现智能聊天及吸附动画效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue基于WEBSocket如何实现智能聊天及吸附动画效果”文章吧。

1.效果如下：

2.主要功能：

2.1.基于websocket实现聊天功能，封装了一个socket.js文件

2.2使用Jwchat插件实现类似QQ、微信电脑端的功能

（其实并不是很好用，但考虑到后续可能会使用其功能就先用了）

2.3动画效果（如关闭打开时动画、吸附效果及其他效果）

3.实现步骤：

3.1.实现websocket聊天功能

首先封装了一个socket.js文件；需要主要的是将socket.js中URL修改成自己的

封装的websocke暴露三个接口

• sendSock用于发送数据，发给后端

• createWebSocket用于创建连接、接收数据并进行处理

• closeSock 用于关闭连接

3.2.在页面中的使用方法： 

第一步：导入文件

import { sendSock, createWebSocket, closeSock } from "@/api/socket";

第二步：初始化时建立websocket连接

created() {    this.init();    ......  },  methods: {    init() {      createWebSocket(this.global_callback);      ......    },     // websocket的回调函数，msg表示收到的消息    global_callback(msg) {      console.log("收到服务器信息：" + msg);    },  },

关闭连接

closeSock();

发送给后端的方法

sendSock(xxx)

var websock = null;var global_callback = null;var serverPort = "80"; // webSocket连接端口var wsuri = "ws://" + window.location.hostname + ":" + serverPort;function createWebSocket(callback) {  if (websock == null || typeof websock !== WebSocket) {    initWebSocket(callback);  } }function initWebSocket(callback) {  global_callback = callback;  // 初始化websocket  websock = new WebSocket(wsuri);  websock.onmessage = function (e) {    websocketonmessage(e);  };  websock.onclose = function (e) {    websocketclose(e);  };  websock.onopen = function () {    websocketOpen();  };  // 连接发生错误的回调方法  websock.onerror = function () {    console.log("WebSocket连接发生错误");     //createWebSocket();啊，发现这样写会创建多个连接，加延时也不行  };}// 实际调用的方法function sendSock(agentData ) {  if (websock.readyState === websock.OPEN) {    // 若是ws开启状态    websocketsend(agentData);  } else if (websock.readyState === websock.CONNECTING) {    // 若是 正在开启状态，则等待1s后重新调用    setTimeout(function () {      sendSock(agentData);    }, 1000);  } else {    // 若未开启 ，则等待1s后重新调用    setTimeout(function () {      sendSock(agentData);    }, 1000);  }}function closeSock() {  websock.close();}// 数据接收function websocketonmessage(msg) {  // console.log("收到数据："+JSON.parse(e.data));  // console.log("收到数据："+msg);  // global_callback(JSON.parse(msg.data));  // 收到信息为Blob类型时  let result = null;  // debugger  if (msg.data instanceof Blob) {    const reader = new FileReader();    reader.readAsText(msg.data, "UTF-8");    reader.onload = (e) => {      result = JSON.parse(reader.result);      //console.log("websocket收到", result);      global_callback(result);    };  } else {    result = JSON.parse(msg.data);    //console.log("websocket收到", result);    global_callback(result);  }}// 数据发送function websocketsend(agentData) {  console.log("发送数据：" + agentData);  websock.send(agentData);}// 关闭function websocketclose(e) {  console.log("connection closed (" + e.code + ")");}function websocketOpen(e) {  console.log("连接打开");}export { sendSock, createWebSocket, closeSock };

4.使用Jwchat插件实现类似QQ、微信电脑端的功能

 4.1步骤

  安装依赖

npm i jwchat -S

  main.js 引入配置 

//element 必须引入import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.CSS';Vue.use(ElementUI);//聊天室-基于elementimport Chat from 'jwchat';Vue.use(Chat)

  组件中使用

<template>  <div class="jwchat">    <!--       v-model输入框中的文字String-""      taleList会话内容Array-[]      toolConfig工具栏配置Object-{}      widthJwChat界面框宽度string-750px      heightJwChat界面框高度string-570px      config组件配置Object-{}      scrollType消息自动到低Stringscrollnoroll      showRightBox显示右边内容Booleanfalsetrue      winBarConfig多窗口配置      quickList   自动匹配快捷回复      @enter输入框点击就发送或者回车触发的事件输入的原始数据      @clickTalk点击聊天框列中的用户和昵称触发事件当前对话数据     -->    <JwChat-index      v-model="inputMsg"      :taleList="taleList"      :config="config"      :showRightBox="true"      scrollType="scroll"      :winBarConfig="winBarConfig"      :quickList="config.quickList"      @enter="bindEnter"      @clickTalk="talkEvent"    >      <!-- 窗口右边栏 -->      <JwChat-rightbox :config="rightConfig" @click="rightClick" />      <!-- 快捷回复 -->      <!-- <JwChat-talk :Talelist="talk" :config="quickConfig" @event="bindTalk" /> -->      <!-- 工具栏自定义插槽 -->      <template slot="tools">        <div  @click="toolEvent(12)">          <JwChat-icon type="icon-lishi" title="自定义" />        </div>      </template>    </JwChat-index>  </div></template> <script>const img = "https://www.baidu.com/img/flexible/loGo/pc/result.png";const listData = [    {    date: "2021/03/02 13:14:21",    mine: false,    name: "留恋人间不羡仙",    img: "Https://img0.baidu.com/it/u=3066115177,3339701526&fm=26&fmt=auto&gp=0.jpg",    text: {      system: {        title: "在接入人工前，智能助手将为您首次应答。",        subtitle: "猜您想问:",        content: [          {            id: `system1`,            text: "组件如何使用",          },          {            id: `system2`,            text: "组件参数在哪里查看",          },          {            id: "system",            text: "我可不可把组件用在商业",          },        ],      },    },  },];function getListArr(size) {  const listSize = listData.length;  if (!size) {    size = listSize;  }  let result = [];  for (let i = 0; i < size; i++) {    const item = listData[(Math.random() * listSize) >> 0];    item.id = Math.random().toString(16).substr(-6);    result.push(item);  }  return result;}export default {  components: {},  data() {    return {      // 输入框中的文字      inputMsg: "",      // 会话内容      taleList: [],      // 工具栏配置      tool: {        // show: ['file', 'history', 'img', ['文件1', '', '美图']],        // showEmoji: false,        callback: this.toolEvent,      },      // 组件配置      config: {        img: "https://img1.baidu.com/it/u=2109725846,3376113789&fm=26&fmt=auto&gp=0.jpg",        name: "JwChat",        dept: "最简单、最便捷",        callback: this.bindCover,        historyConfig: {          show: true,          tip: "滚动到顶时候显示的提示",          callback: this.bindLoadHistory,        },        // 自动匹配快捷回复        quickList: [                  { text: "外面的烟花奋力的燃着，屋里的人激情的说着情话", id: 10 },          { text: "假如你是云，我就是雨，一生相伴，风风雨雨；", id: 11 },          {            text: "即使泪水在眼中打转，我依旧可以笑的很美，这是你学不来的坚强。",            id: 12,          },          {            text: " 因为不知来生来世会不会遇到你，所以今生今世我会加倍爱你。",            id: 13,          },        ],      },     };  },  methods: {    // 切换用户窗口，加载对应的历史记录    bindWinBar(play = {}) {      const { type, data = {} } = play;      console.log(play);      if (type === "winBar") {        const { id, dept, name, img } = data;        this.config = { ...this.config, id, dept, name, img };        this.winBarConfig.active = id;        if (id === "win00") {          this.taleList = getListArr();        } else this.taleList = getListArr((Math.random() * 4) >> 0);      }      if (type === "winBtn") {        const { target: { id } = {} } = data;        const { list } = this.winBarConfig;        this.winBarConfig.list = list.reduce((p, i) => {          if (id != i.id) p.push(i);          return p;        }, []);      }    },    // 点击聊天框列中的用户和昵称触发事件    talkEvent(play) {      console.log(play);    },    // 输入框点击就发送或者回车触发的事件    bindEnter(e) {      console.log(e);      const msg = this.inputMsg;      if (!msg) return;      const msgObj = {        date: "2020/05/20 23:19:07",        text: { text: msg },        mine: true,        name: "JwChat",        img: "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg",      };      this.taleList.push(msgObj);    },           bindLoadHistory() {      const history = new Array(3).fill().map((i, j) => {        return {          date: "2020/05/20 23:19:07",          text: { text: j + new Date() },          mine: false,          name: "JwChat",          img: "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg",        };      });      let list = history.concat(this.list);      this.taleList = list;      console.log("加载历史", list, history);    },        toolEvent(type, plyload) {      console.log("tools", type, plyload);    },    bindCover(event) {      console.log("header", event);    },    rightClick(type) {      console.log("rigth", type);    },  },  mounted() {    this.taleList = getListArr();  },};</script> <style>.jwchat {  height: 100vh;  font-family: Avenir, Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}</style>

5.动画效果

吸附效果

使用v-show绑定变量控制显示隐藏

 // 吸附效果    xiFu () {      setTimeout(() => {        //10秒后自动隐藏小空间转为吸附效果        this.isMouse = false      }, 5000)    },

@keyframes move {  0% {    transfORM: translateX(0px) rotateY(20deg);  }  100% {    transform: translateX(1.0417rem) rotateY(180deg);  }} .cssDongHua {  animation: move 2s linear 1s 1 alternate forwards;}//template:class="isMouse ? '' : 'cssDongHua'"        @click="isOpen = !isOpen"        v-show="!isOpen"        @mouseenter="isMouse = true"

以上就是关于“vue基于websocket如何实现智能聊天及吸附动画效果”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。