首页 > 其他分享 >websocket用法

websocket用法

时间:2024-11-05 16:41:32浏览次数:1  
标签:WebSocket socket console 连接 error websocket 用法 event

WebSocket 是一种在客户端和服务器之间建立持久化连接的协议,允许双向通信。它适用于实时应用程序,如聊天应用、在线游戏或实时数据流。以下是 WebSocket 在 Vue.js 中的基本用法:

1. 建立 WebSocket 连接

首先,创建 WebSocket 连接:

const socket = new WebSocket('ws://your-server-url'); // 替换为你的 WebSocket 服务地址

2. 监听连接成功

监听 WebSocket 连接成功事件:


socket.onopen = function(event) {
  console.log('WebSocket connection established');
};

3. 接收消息

监听从服务器发送来的消息:


socket.onmessage = function(event) {
  console.log('Message from server:', event.data);
};

4. 发送消息

向服务器发送消息:

socket.send(JSON.stringify({ type: 'greeting', message: 'Hello, Server!' }));

5. 监听连接关闭

监听连接关闭事件:


socket.onclose = function(event) {
  console.log('WebSocket connection closed', event);
};

6. 处理错误

监听 WebSocket 错误事件:

socket.onerror = function(error) {
  console.error('WebSocket Error:', error);
};

7. 关闭 WebSocket 连接

当不再需要 WebSocket 连接时,可以手动关闭连接:

socket.close();

在 Vue 组件中使用 WebSocket

通常,你会在 Vue 组件中创建 WebSocket 连接,确保在组件销毁时关闭连接:


export default {
  data() {
    return {
      socket: null,
      message: ''
    };
  },
  mounted() {
    this.socket = new WebSocket('ws://your-server-url');
    
    this.socket.onopen = () => {
      console.log('WebSocket connection established');
    };

    this.socket.onmessage = (event) => {
      this.message = event.data; // 处理来自服务器的消息
    };

    this.socket.onerror = (error) => {
      console.error('WebSocket Error:', error);
    };

    this.socket.onclose = () => {
      console.log('WebSocket connection closed');
    };
  },
  beforeDestroy() {
    if (this.socket) {
      this.socket.close(); // 组件销毁时关闭连接
    }
  }
};

这样,你就可以在 Vue 组件中使用 WebSocket 进行实时通信。

标签:WebSocket,socket,console,连接,error,websocket,用法,event
From: https://www.cnblogs.com/baozhengrui/p/18528316

相关文章

  • 队列的用法详解
    队列是一种常用的数据结构,具有先进先出(FIFO,First-In-First-Out)的特点。通常用来管理需要按顺序处理的任务,例如打印队列、任务调度、资源分配等。下面详细介绍队列的基本概念、常用操作、类型及其在C语言中的实现。队列的基本概念在队列中:入队(enqueue):将元素添加到队列的......
  • arkUI:文本框、文本域的创建和常见用法(TextInput 、TextArea)
    arkUI:文本框、文本域的创建和常见用法(TextInput、TextArea)1主要内容说明2例子2.1文本框、文本域的创建(TextInput、TextArea)2.1.1源码1(文本框、文本域的创建)2.1.2源码1运行效果2.2设置文本框的输入类型2.2.1源码2(设置输入框的输入类型)2.2.2源码2运行效果2.3......
  • Axios详解及用法
    文章目录Axios详解:用法、创作流程、优缺点、代码案例及使用场景Axios简介Axios的用法Axios的创作流程Axios的优缺点代码案例及详细解释Axios的使用场景Axios详解:用法、创作流程、优缺点、代码案例及使用场景Axios简介Axios是一个基于Promise的HTTP客户端,用于浏览......
  • Python学习笔记-yield用法及优点
    Python学习笔记-yield用法及优点概述yield用于定义生成器,它最终返回一个生成器对象,这个生成器对象可以被迭代。例子#encoding:utf8importsysn=200m=1000#定义一个生成器,yield必须在函数中使用defGenerators(n):foriinrange(n):ifi%2==0:......
  • Tmux基本用法
    Tmux是一个终端复用器(terminalmultiplexer),非常有用,属于常用的开发工具。它的核心功能是解绑当前运行会话进程和当前终端窗口。即使出现意外情况,当前的终端窗口被kill掉了(断电、断网、手贱点错了等等),你之前使用Tmux执行的会话进程仍在继续运行,并可以绑定到其他的终端窗口继续操......
  • 模板字符串的一些用法小记
    1.插入变量:使用 ${} 在模板字符串中插入变量的值。constname='Alice';constmessage=`Hello,${name}!`;console.log(message);//输出:"Hello,Alice!"html结构2.表达式求值:在 ${} 中可以执行任意的JavaScript表达式,并将其结果插入到模板字符串中。con......
  • 深入理解 `std::shared_ptr`:原理、用法及其线程安全性
    在C++中,智能指针是现代内存管理的重要工具,尤其是在复杂的多线程环境中,能显著减少内存泄漏和悬空指针等问题。std::shared_ptr是C++11引入的一种共享智能指针,通过引用计数机制管理对象的生命周期。本文将详细介绍std::shared_ptr的基本用法、循环引用问题、线程安全性及其局......
  • Vue.js 混入(Mixins)高级用法:提升代码复用与灵活性
    在Vue.js中,混入(Mixins)是一种灵活的方式来分散可复用的代码。它们允许你将组件的选项分散到多个组件中,从而提升代码的复用性和灵活性。以下是一些混入的高级用法及示例。1.基础概念混入是一个包含Vue组件选项的对象,任何包含该混入的组件都可以使用这些选项。//定义......
  • WebSocket 及时通信 - 2024最新版前端秋招面试短期突击面试题【100道】
    WebSocket及时通信-2024最新版前端秋招面试短期突击面试题【100道】......
  • Python数据处理典型用法
    注意:以下基于Python3基础篇一、数据类型1.list中增加元素,追加元素到末尾:list.append(‘元素’)、插入到指定的位置:list.insert(‘索引号’,‘元素’);删除末尾的元素:list.pop、删除指定位置的元素:list.pop(‘索引号’)2.input()返回的数据类型是str3.迭代/循环:forxin... 把......