当前位置:   article > 正文

前端使用websocket发送消息,建立连接(详细)。【前端】_websocket怎么连接

websocket怎么连接

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

1 基础介绍


1.1 什么是WebSocket


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

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

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

1.2 代码示例


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

  1. var socket = new WebSocket("ws://example.com/socketserver");
  2.  
  3. socket.onopen = function(event) {
  4.   socket.send("Hello server!");
  5. };
  6.  
  7. socket.onmessage = function(event) {
  8.   console.log("Received message from server: " + event.data);
  9. };
  10.  
  11. socket.onerror = function(event) {
  12.   console.log("WebSocket error: " + event.error);
  13. };
  14.  
  15. socket.onclose = function(event) {
  16.   console.log("WebSocket connection closed with code " + event.code);
  17. };


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

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

2 案例讲解


2.1 vue怎么用websocket发送请求


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

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

  1. <template>
  2.   <div>
  3.     <input v-model="message" @keyup.enter="sendMessage">
  4.     <button @click="sendMessage">Send</button>
  5.     <ul>
  6.       <li v-for="msg in messages">{{ msg }}</li>
  7.     </ul>
  8.   </div>
  9. </template>
  10.  
  11. <script>
  12. export default {
  13.   data() {
  14.     return {
  15.       message: '',
  16.       messages: [],
  17.       socket: null
  18.     }
  19.   },
  20.   created() {
  21.     this.socket = new WebSocket('ws://localhost:3000')
  22.     this.socket.addEventListener('message', this.handleMessage)
  23.   },
  24.   beforeDestroy() {
  25.     this.socket.close()
  26.   },
  27.   methods: {
  28.     sendMessage() {
  29.       this.socket.send(this.message)
  30.       this.message = ''
  31.     },
  32.     handleMessage(event) {
  33.       this.messages.push(event.data)
  34.     }
  35.   }
  36. }
  37. </script>

在上面的代码中,

首先在 created 钩子函数中创建了一个 WebSocket 对象,并添加了一个消息处理函数 handleMessage。
在 sendMessage 方法中,将用户输入的消息发送到服务器。
在 handleMessage 方法中,将从服务器接收到的消息添加到 messages 数组中,从而可以在界面上显示出来。
在组件销毁之前,需要调用 close() 方法关闭 WebSocket 连接。
需要注意的是,在使用 WebSocket 时,需要考虑跨域问题。如果 WebSocket 连接的 URL 和当前页面的 URL 不同,那么需要在服务器端进行相应的跨域设置。同时,需要注意在发送和接收消息时的数据格式,通常需要将数据转换为 JSON 字符串进行传输。

2.2 this.message 怎么组装


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

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

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

  1. <template>
  2.   <div>
  3.     <input v-model="message.text" @keyup.enter="sendMessage">
  4.     <button @click="sendMessage">Send</button>
  5.     <ul>
  6.       <li v-for="msg in messages">{{ msg.text }} ({{ msg.timestamp }})</li>
  7.     </ul>
  8.   </div>
  9. </template>
  10.  
  11. <script>
  12. export default {
  13.   data() {
  14.     return {
  15.       message: {
  16.         text: '',
  17.         timestamp: null
  18.       },
  19.       messages: [],
  20.       socket: null
  21.     }
  22.   },
  23.   created() {
  24.     this.socket = new WebSocket('ws://localhost:3000')
  25.     this.socket.addEventListener('message', this.handleMessage)
  26.   },
  27.   beforeDestroy() {
  28.     this.socket.close()
  29.   },
  30.   methods: {
  31.     sendMessage() {
  32.       this.message.timestamp = new Date().toISOString()
  33.       const json = JSON.stringify(this.message)
  34.       this.socket.send(json)
  35.       this.message.text = ''
  36.       this.message.timestamp = null
  37.     },
  38.     handleMessage(event) {
  39.       const msg = JSON.parse(event.data)
  40.       this.messages.push(msg)
  41.     }
  42.   }
  43. }
  44. </script>

在上面的代码中,

this.message 是一个包含 text 和 timestamp 两个属性的对象,在用户输入消息后,将消息文本赋值给 text 属性。
在发送消息之前,将当前时间戳赋值给 timestamp 属性,并将消息对象转换为 JSON 字符串,然后通过 WebSocket 发送出去。
在接收到服务器发送的消息后,将 JSON 字符串解析为消息对象,并将消息对象添加到 messages 数组中,从而可以在界面上显示出来。


2.3 发送示例


要发送这个:

  1. {
  2. "msg_id": "1",
  3. "msg_type": "test",
  4. "content": {
  5. "count": "10"
  6. }
  7. }


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

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

  1. import axios from 'axios'
  2.  
  3. const ws = new WebSocket('ws://localhost:3000')
  4.  
  5. ws.onopen = () => {
  6.   const data = {
  7.     msg_id: '1',
  8.     msg_type: 'test',
  9.     content: {
  10.       count: '10'
  11.     }
  12.   }
  13.   const jsonString = JSON.stringify(data)
  14.   ws.send(jsonString)
  15. }
  16.  
  17. ws.onmessage = (event) => {
  18.   const response = JSON.parse(event.data)
  19.   console.log('Received message:', response)
  20. }
  21.  
  22. ws.onerror = (error) => {
  23.   console.error('WebSocket error:', error)
  24. }
  25.  
  26. function sendWebSocketRequest(data) {
  27.   const jsonString = JSON.stringify(data)
  28.   ws.send(jsonString)
  29. }
  30.  
  31. export default {
  32.   sendWebSocketRequest
  33. }

在上面的代码中,

首先创建了一个 WebSocket 对象,并在 onopen 回调函数中发送了一条 WebSocket 请求。
在 onmessage 回调函数中处理服务器返回的响应数据。
在 onerror 回调函数中处理 WebSocket 错误。
优化
为了方便使用,将发送 WebSocket 请求的代码封装在 sendWebSocketRequest 函数中,可以在其他组件中直接调用该函数来发送 WebSocket 请求。例如:

  1. import { sendWebSocketRequest } from '@/api/websocket'
  2.  
  3. sendWebSocketRequest({
  4.   msg_id: '1',
  5.   msg_type: 'test',
  6.   content: {
  7.     count: '10'
  8.   }
  9. }).then(response => {
  10.   console.log('Received response:', response)
  11. }).catch(error => {
  12.   console.error('WebSocket error:', error)
  13. })


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

2.4 接收示例


返回参数是这个,我该怎么接收:

  1. {
  2. "msg_id": "1",
  3. "msg_type": "test",
  4. "code": 0,
  5. "err_msg": "Success.",
  6. "content": {
  7. "count": "20"
  8. }
  9. }


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

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

  1. import axios from 'axios'
  2.  
  3. const ws = new WebSocket('ws://localhost:3000')
  4.  
  5. ws.onopen = () => {
  6.   const data = {
  7.     msg_id: '1',
  8.     msg_type: 'test',
  9.     code: 0,
  10.     err_msg: 'Success.',
  11.     content: {
  12.       count: '20'
  13.     }
  14.   }
  15.   const jsonString = JSON.stringify(data)
  16.   ws.send(jsonString)
  17. }
  18.  
  19. ws.onmessage = (event) => {
  20.   const response = JSON.parse(event.data)
  21.   console.log('Received message:', response)
  22.  
  23.   // 处理返回的数据
  24.   if (response.code === 0) {
  25.     console.log('Success:', response.content)
  26.   } else {
  27.     console.error('Error:', response.err_msg)
  28.   }
  29. }
  30.  
  31. ws.onerror = (error) => {
  32.   console.error('WebSocket error:', error)
  33. }
  34.  
  35. function sendWebSocketRequest(data) {
  36.   const jsonString = JSON.stringify(data)
  37.   ws.send(jsonString)
  38. }
  39.  
  40. export default {
  41.   sendWebSocketRequest
  42. }

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/197613
推荐阅读
相关标签
  

闽ICP备14008679号