Vue中使用WebSocket实现前后端实时通讯

一、使用TypeScript配置Vue项目

在Vue项目中使用TypeScript，需要先进行相关配置，以下是一些基本配置：

// 安装相关依赖
npm install --save-dev typescript ts-loader

// 添加vue-shim.d.ts文件
declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

接下来，需要在webpack.config.js文件中添加相关配置：

// 引入webpack模块
const webpack = require('webpack');

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

二、前端Vue中使用WebSocket

1、使用Vue插件vue-native-websocket

第一种使用WebSocket的方法，是使用Vue插件vue-native-websocket。

首先需要在项目中安装该插件：

npm install vue-native-websocket --save

接下来，在main.js文件中添加以下代码：

import VueNativeSock from 'vue-native-websocket'
Vue.use(VueNativeSock, 'ws://localhost:8080/ws', {
  store: store,
  format: 'json',
  connectManually: true
})

上述代码中，第一参数表示WebSocket的地址，第二个参数是个对象，包括store、format和connectManually等属性。

接下来，在Vue组件中，可以这样使用WebSocket：

import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      socket: state => state.socket.socket
    })
  },
  methods: {
    send () {
      const msg = JSON.stringify({type: 'message', data: this.msgToSend})
      this.socket.send(msg)
      this.msgToSend = ''
    }
  }
}

上述代码中，通过computed属性，将socket对象映射到组件中。send方法，可以向WebSocket服务器发送数据。

2、手动实现WebSocket

在Vue项目中手动实现WebSocket，也是一种常见的做法。

首先，需要新建一个WebSocket Vue组件：

<template>
  <div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        ws: null
      }
    },
    mounted () {
      this.initWebsocket()
    },
    beforeDestroy () {
      this.closeWebsocket()
    },
    methods: {
      initWebsocket () {
        this.ws = new WebSocket('ws://localhost:8080/ws')
        this.ws.onopen = (event) => {
          console.log('open', event)
          this.sendMessage('hello world')
        }
        this.ws.onmessage = (event) => {
          console.log('message', event)
        }
        this.ws.onerror = (event) => {
          console.log('error', event)
        }
        this.ws.onclose = (event) => {
          console.log('close', event)
          this.ws = null
        }
      },
      closeWebsocket () {
        if (this.ws) {
          this.ws.close()
        }
      },
      sendMessage (message) {
        if (this.ws) {
          this.ws.send(message)
        }
      }
    }
  }
</script>

上述WebSocket组件，通过initWebsocket方法，初始化WebSocket的连接，通过sendMessage方法，向WebSocket服务器发送数据，通过closeWebsocket方法，关闭WebSocket连接。

三、Vue中使用axios

1、axios发送GET请求

使用axios发送GET请求，需要引入axios，并调用其get方法。

import axios from 'axios'

axios.get('http://localhost:3000/users')
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })

上述代码中，我们向http://localhost:3000/users发送了一个GET请求，并在成功或失败时，分别打印了response或error。

2、axios发送POST请求

使用axios发送POST请求，需要调用axios的post方法。

import axios from 'axios'

axios.post('http://localhost:3000/users', {
    name: 'John Smith',
    age: '25'
  })
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })

上述代码中，我们向http://localhost:3000/users发送了一个POST请求，并以JSON格式，向服务器传递了一个{name: ‘John Smith’, age: ’25’}的对象。

3、axios拦截器

在axios中，拦截器是一种重要的概念。拦截器可以在请求或响应被处理前，对其进行拦截或处理。

以下是一个拦截器的示例代码：

import axios from 'axios'

axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

上述代码中，我们使用了axios的request拦截器，对请求进行了拦截，并在请求头中添加了Authorization属性。