javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > websocket发送消息

前端使用websocket发送消息的示例代码

作者：颜淡慕潇

WebSocket是一种在单个TCP连接上进行全双工通信的协议，它可以让客户端和服务器之间进行实时的双向通信，这篇文章主要介绍了前端使用websocket发送消息的示例代码,需要的朋友可以参考下

序言

今天来学习一下前端如何使用websocket发送消息

1 基础介绍

1.1 什么是WebSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它可以让客户端和服务器之间进行实时的双向通信。与传统的 HTTP 请求不同，WebSocket 使用了一个长连接，在客户端和服务器之间保持持久的连接，从而可以实时地发送和接收数据。

在 WebSocket 中，客户端和服务器之间可以互相发送消息。

客户端可以使用 JavaScript 中的 WebSocket API 发送消息到服务器，也可以接收服务器发送的消息。

1.2 代码示例

下面是一个使用 WebSocket API 发送消息的代码示例：

var socket = new WebSocket("ws://example.com/socketserver");
socket.onopen = function(event) {
  socket.send("Hello server!");
};
socket.onmessage = function(event) {
  console.log("Received message from server: " + event.data);
};
socket.onerror = function(event) {
  console.log("WebSocket error: " + event.error);
};
socket.onclose = function(event) {
  console.log("WebSocket connection closed with code " + event.code);
};

在上面的代码中，首先创建了一个 WebSocket 对象，指定了服务器的地址。然后在 onopen 回调函数中，发送了一个消息到服务器。当服务器发送消息到客户端时，onmessage 回调函数会被触发，从而可以处理服务器发送的消息。如果出现错误或者连接被关闭，onerror 和 onclose 回调函数会被触发，从而可以处理这些事件。

需要注意的是，在使用 WebSocket 发送消息之前，必须先建立 WebSocket 连接。在上面的代码中，通过创建一个 WebSocket 对象来建立连接，然后在 onopen 回调函数中发送消息到服务器。如果在连接建立之前就尝试发送消息，那么这些消息将无法发送成功。

2 案例讲解

2.1 vue怎么用websocket发送请求

在 Vue 中使用 WebSocket，可以借助 WebSocket 对象来创建 WebSocket 连接，并通过 send() 方法向服务器发送消息。

下面是一个基本的 Vue 组件，演示如何使用 WebSocket 发送和接收消息：

<template>
  <div>
    <input v-model="message" @keyup.enter="sendMessage">
    <button @click="sendMessage">Send</button>
    <ul>
      <li v-for="msg in messages">{{ msg }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: '',
      messages: [],
      socket: null
    }
  },
  created() {
    this.socket = new WebSocket('ws://localhost:3000')
    this.socket.addEventListener('message', this.handleMessage)
  },
  beforeDestroy() {
    this.socket.close()
  },
  methods: {
    sendMessage() {
      this.socket.send(this.message)
      this.message = ''
    },
    handleMessage(event) {
      this.messages.push(event.data)
    }
  }
}
</script>

在上面的代码中，

需要注意的是，在使用 WebSocket 时，需要考虑跨域问题。如果 WebSocket 连接的 URL 和当前页面的 URL 不同，那么需要在服务器端进行相应的跨域设置。同时，需要注意在发送和接收消息时的数据格式，通常需要将数据转换为 JSON 字符串进行传输。

2.2 this.message 怎么组装

在上面的 Vue 组件中，this.message 是用户输入的消息文本，可以通过绑定 v-model 实现双向绑定。

当用户输入消息后，可以将消息文本直接发送到服务器。在发送消息之前，可以根据需要对消息进行组装，例如添加消息的发送者、时间等信息，以便在服务器端进行更好的处理。

以下是一个示例，假设要发送的消息格式为一个包含文本和时间戳的 JSON 对象：

<template>
  <div>
    <input v-model="message.text" @keyup.enter="sendMessage">
    <button @click="sendMessage">Send</button>
    <ul>
      <li v-for="msg in messages">{{ msg.text }} ({{ msg.timestamp }})</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: {
        text: '',
        timestamp: null
      },
      messages: [],
      socket: null
    }
  },
  created() {
    this.socket = new WebSocket('ws://localhost:3000')
    this.socket.addEventListener('message', this.handleMessage)
  },
  beforeDestroy() {
    this.socket.close()
  },
  methods: {
    sendMessage() {
      this.message.timestamp = new Date().toISOString()
      const json = JSON.stringify(this.message)
      this.socket.send(json)
      this.message.text = ''
      this.message.timestamp = null
    },
    handleMessage(event) {
      const msg = JSON.parse(event.data)
      this.messages.push(msg)
    }
  }
}
</script>

在上面的代码中，

2.3 发送示例

要发送这个：

{
"msg_id": "1",
"msg_type": "test",
"content": {
"count": "10"
}
}

代码实现

要发送这个 JSON 数据，可以先将其转换为字符串，然后通过 WebSocket 发送出去。

以下是一个示例代码，假设使用 axios 库来发送 WebSocket 请求：

import axios from 'axios'
const ws = new WebSocket('ws://localhost:3000')
ws.onopen = () => {
  const data = {
    msg_id: '1',
    msg_type: 'test',
    content: {
      count: '10'
    }
  }
  const jsonString = JSON.stringify(data)
  ws.send(jsonString)
}
ws.onmessage = (event) => {
  const response = JSON.parse(event.data)
  console.log('Received message:', response)
}
ws.onerror = (error) => {
  console.error('WebSocket error:', error)
}
function sendWebSocketRequest(data) {
  const jsonString = JSON.stringify(data)
  ws.send(jsonString)
}
export default {
  sendWebSocketRequest
}

在上面的代码中，

优化

为了方便使用，将发送 WebSocket 请求的代码封装在 sendWebSocketRequest 函数中，可以在其他组件中直接调用该函数来发送 WebSocket 请求。例如：

import { sendWebSocketRequest } from '@/api/websocket'
sendWebSocketRequest({
  msg_id: '1',
  msg_type: 'test',
  content: {
    count: '10'
  }
}).then(response => {
  console.log('Received response:', response)
}).catch(error => {
  console.error('WebSocket error:', error)
})

在上面的代码中，调用 sendWebSocketRequest 函数发送 WebSocket 请求，并在请求成功或失败时打印相应的日志。

2.4 接收示例

返回参数是这个，我该怎么接收：

{
"msg_id": "1",
"msg_type": "test",
"code": 0,
"err_msg": "Success.",
"content": {
"count": "20"
}
}

代码实现

要接收和处理服务器返回的 JSON 数据，可以在 onmessage 回调函数中处理接收到的消息。

以下是一个示例代码，假设使用 axios 库发送 WebSocket 请求：

import axios from 'axios'
const ws = new WebSocket('ws://localhost:3000')
ws.onopen = () => {
  const data = {
    msg_id: '1',
    msg_type: 'test',
    code: 0,
    err_msg: 'Success.',
    content: {
      count: '20'
    }
  }
  const jsonString = JSON.stringify(data)
  ws.send(jsonString)
}
ws.onmessage = (event) => {
  const response = JSON.parse(event.data)
  console.log('Received message:', response)
  // 处理返回的数据
  if (response.code === 0) {
    console.log('Success:', response.content)
  } else {
    console.error('Error:', response.err_msg)
  }
}
ws.onerror = (error) => {
  console.error('WebSocket error:', error)
}
function sendWebSocketRequest(data) {
  const jsonString = JSON.stringify(data)
  ws.send(jsonString)
}
export default {
  sendWebSocketRequest
}

在上面的代码中，使用 JSON.parse() 方法将接收到的消息转换为 JSON 对象，并在 onmessage 回调函数中处理返回的数据。如果返回的数据中 code 属性为 0，表示请求成功，可以在控制台打印返回的数据；否则，表示请求失败，可以在控制台打印错误信息。

到此这篇关于前端如何使用websocket发送消息的文章就介绍到这了,更多相关websocket发送消息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文