【2023-4-24】前端使用websocket的简单示例

【2023-4-24】前端使用websocket的简单示例

简单记录下，使用websocket的小示例，不代表实际项目中使用的情况，属于理解下机制的示例实操。

效果

• 输入框输入后，将值通过websocket发送值后台的服务器（nodejs），并进行逆序输出后，返回给前端

代码

代码及其简单，实际项目使用中会有业务逻辑掺杂，本例不做赘述

vue代码

<template>
  <div>
    <div>服务器接收到的消息： {{ message }}</div>
    <form @submit.prevent="sendMessage">
      <input type="text" v-model="inputValue" />
      <button type="submit">发送消息</button>
    </form>
    <div v-for="(item, index) in inputValueRes" :key="index">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: '',
      inputValue: '',
      websocket: null,
      inputValueRes: []
    }
  },
  created () {
    this.websocket = new WebSocket('ws://10.8.1.116:3000')
  },
  mounted () {
    this.websocket.onopen = () => {
      console.log('WebSocket 连接成功！')
    }
    this.websocket.onmessage = (event) => {
      // 传递多个参数时，需要将接收到的值转换为对象
      this.message = JSON.parse(event.data).str1
      this.inputValueRes.push(JSON.parse(event.data).str2)
    }
    this.websocket.onerror = () => {
      console.error('WebSocket 连接错误！')
    }
    this.websocket.onclose = () => {
      console.log('WebSocket 连接关闭！')
    }
  },
  methods: {
    sendMessage () {
      if (this.inputValue.trim() === '') {
        return
      }
      this.websocket.send(this.inputValue)
      this.inputValue = ''
    },
  },
}
</script>

安装websocket库时，一直报错，将原nodejs设置的代理地址设置为null后，重新设置代理地址，安装即可

nodejs

const WebSocket = require('ws')

const wss = new WebSocket.Server({
  port: 3000
})

wss.on('connection', (ws) => {
  console.log('WebSocket 连接成功！')

  ws.on('message', (message) => {
    console.log(`收到消息：${message}`)

    // 将消息内容逆序后再发送回客户端
    // 如果出现 message.split is not a function 的错误提示，很可能是因为 message 不是一个字符串，而是一个二进制数据。
    // 这种情况下，你需要先将二进制数据转换成字符串，然后再进行逆序操作。可以使用 Buffer 对象将二进制数据转换成字符串
    // const reversedMessage = message.split('').reverse().join('')
    // const reversedMessage = Buffer.from(message).toString().split('').reverse().join('')
    // 其他转换字符串的方法
    const reversedMessage = message.toString().toString().split('').reverse().join('')
    // ws.send(`服务器回复：${reversedMessage}`)
    const sendObj = {
      str1: `服务器接收：${message}`,
      str2: `服务器回复：${reversedMessage}`,

    }
    // 多次参数时，需要使用JSON.stringify转换为字符串，接收是JSON.parse转换为对象
    ws.send(JSON.stringify(sendObj))

  })

  ws.on('close', () => {
    console.log('WebSocket 连接关闭！')
  })
})

• websocket传输需要未字符串类型，故当需要返回多个参数时，需要用对象包裹，并使用JSON.stringify转为字符串
• 前端接收时，需要对返回的参数进行JSON.parse转换。

以上即为简单的websocket实现示例，如有错误，欢迎指正！