vue使用websocket概念及示例

要理解Vue.js如何使用Websocket，我们需要先了解什么是Websocket。Websocket是一种实现全双工通信的协议，它允许浏览器和服务器之间实时通信，而不需要完全依靠HTTP请求响应模式。

接下来，我们将为您介绍如何在Vue.js应用程序中使用Websocket。

步骤1：安装和导入WebSocket应用程序

首先，我们需要安装Websocket软件包。这可以通过在终端中运行以下命令来完成：

npm install --save socket.io-client

安装完成后，我们可以通过导入它来将WebSocket应用程序添加到Vue.js应用程序中。

import io from 'socket.io-client'

步骤2：连接Websocket服务器

在Vue.js组件的mounted生命周期方法中，我们可以创建一个WebSocket实例，并连接到服务器。

mounted() {
  this.socket = io('http://localhost:3000')
}

在上面的示例中，我们将WebSocket连接到本地服务器。

步骤3：发送和处理消息

我们可以使用Websocket实例上的emit方法来发送消息。例如，我们可以发送一条名为“hello”的消息：

this.socket.emit('hello')

我们可以使用on方法在客户端上处理来自服务器的消息。例如，我们可以侦听名为“hello”的消息：

this.socket.on('hello', () => {
  console.log('Hello from server')
})

在上面的示例中，我们将客户端回调函数定义为输出消息“Hello from server”。

我们还可以将其他数据添加到消息中。例如，我们可以将一个对象作为第二个参数发送：

this.socket.emit('myevent', { data: 'Some data' })

在客户端上，我们将处理消息并访问这个对象：

this.socket.on('myevent', (data) => {
  console.log(data) // { data: 'Some data' }
})

示例1：Vue.js中简单的聊天应用程序

下面，我们将使用Vue.js和Websocket创建一个简单的聊天应用程序。

首先，我们将创建Vue.js组件。我们将使用v-model指令来绑定用户输入，并使用v-for指令来显示聊天消息列表。

<template>
  <div>
    <ul>
      <li v-for="msg in messages" :key="msg.id">{{ msg.text }}</li>
    </ul>
    <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="Send a message...">
  </div>
</template>

<script>
  import io from 'socket.io-client'

  export default {
    data() {
      return {
        socket: null,
        messages: [],
        newMessage: ''
      }
    },
    mounted() {
      this.socket = io('http://localhost:3000')
      this.socket.on('chat message', msg => {
        this.messages.push(msg)
      })
    },
    methods: {
      sendMessage() {
        if (!this.newMessage) return
        this.socket.emit('chat message', this.newMessage)
        this.newMessage = ''
      }
    }
  }
</script>

在上面的示例中，我们定义一个WebSocket实例，连接到服务器，侦听名为“chat message”的消息，将新消息添加到messages数组中，并将输入框绑定到newMessage变量。我们将输入框的@keyup.enter事件与发送消息的方法相关联。

我们还可以在服务器上创建一个简单的Express应用程序，用于处理WebSocket连接和聊天消息。

const app = require('express')()
const http = require('http').createServer(app)
const io = require('socket.io')(http)

io.on('connection', socket => {
  console.log('a user connected')
  socket.on('chat message', msg => {
    console.log('message: ' + msg)
    io.emit('chat message', { id: socket.id, text: msg })
  })
  socket.on('disconnect', () => {
    console.log('a user disconnected')
  })
})

http.listen(3000, () => {
  console.log('listening on *:3000')
})

在上面的示例中，我们定义了一个WebSocket事件处理程序，以便在客户端连接至服务器或关闭连接时记录日志。我们定义了一个名为“chat message”的事件处理程序，以便在收到来自客户端的新消息时将其广播到所有连接的客户端。

示例2：使用Websocket从服务器发出命令

以下示例演示如何使用Websocket从服务器发出命令，并使用Vue.js更新UI。

我们将创建一个Vue.js组件，用于显示不同颜色和其状态，并向服务器请求更改颜色状态的命令。

<template>
  <div>
    <div v-for="(obj, index) in objects" :key="index" v-bind:style="{ backgroundColor: obj.color }">
      {{ obj.name }}: {{ obj.status }}
      <button v-if="obj.status === 'off'" @click="turnOn(index)">Turn On</button>
      <button v-else @click="turnOff(index)">Turn Off</button>
    </div>
  </div>
</template>

<script>
  import io from 'socket.io-client'

  export default {
    data() {
      return {
        socket: null,
        objects: [
          { name: 'Object A', color: 'red', status: 'off' },
          { name: 'Object B', color: 'green', status: 'off' },
          { name: 'Object C', color: 'blue', status: 'off' }
        ]
      }
    },
    mounted() {
      this.socket = io('http://localhost:3000')
      this.socket.on('status changed', status => {
        this.objects = this.objects.map((obj, index) => {
          if (index === status.id) {
            return { ...obj, status: status.status }
          } else {
            return obj
          }
        })
      })
    },
    methods: {
      turnOn(id) {
        this.socket.emit('turn on', { id })
      },
      turnOff(id) {
        this.socket.emit('turn off', { id })
      }
    }
  }
</script>

在上面的示例中，我们定义一个WebSocket事件处理程序，用于处理来自服务器的状态更改消息。我们将状态更改消息与objects数组相关联，这是Vue.js数据绑定的一部分，因此当状态更改时，UI也会更新。

我们还定义了一个turnOn和turnOff方法，用于向服务器发出相关命令。

我们可以在服务器上使用以下代码来处理命令：

io.on('connection', socket => {
  console.log('a user connected')
  socket.on('turn on', ({ id }) => {
    console.log(`turn on object #${id}`)
    io.emit('status changed', { id, status: 'on' })
  })
  socket.on('turn off', ({ id }) => {
    console.log(`turn off object #${id}`)
    io.emit('status changed', { id, status: 'off' })
  })
  socket.on('disconnect', () => {
    console.log('a user disconnected')
  })
})

在上面的示例中，我们定义了两个事件处理程序：turn on和turn off。这些时间处理程序断言相关的对象，并广播一个状态更改消息。当客户端收到此消息时，它将更新UI并显示新的状态。

这就是使用Vue.js和Websocket创建应用程序的方法。无论您创建哪种类型的应用程序，使用Websocket都是一种实现实时通信的有力工具。