React Native 全栈开发实战班 - 网络与数据之 websock与服务端交互

1.4 使用 WebSocket 实现实时通信

除了 fetchaxios 这样的 HTTP 请求方式,React Native 还支持 WebSocket,用于实现客户端与服务器之间的实时双向通信。WebSocket 适用于需要实时数据推送的场景,如聊天应用、实时通知、实时数据更新等。

1.4.1 WebSocket 简介

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。与传统的 HTTP 请求不同,WebSocket 连接一旦建立,就可以保持打开状态,服务器可以主动向客户端推送数据,而无需客户端不断轮询。

WebSocket 的特点:

  • 全双工通信: 客户端和服务器可以同时发送和接收数据。
  • 实时性: 数据可以实时推送,无需客户端轮询。
  • 轻量级: WebSocket 协议开销小,适合实时通信。
1.4.2 在 React Native 中使用 WebSocket

React Native 提供了 WebSocket API,用于创建和管理 WebSocket 连接。

基本用法:

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';const WebSocketExample = () => {const [socket, setSocket] = useState(null);const [message, setMessage] = useState('');const [messages, setMessages] = useState([]);useEffect(() => {// 创建 WebSocket 连接const ws = new WebSocket('wss://echo.websocket.org');// 连接打开ws.onopen = () => {console.log('WebSocket connection established');ws.send('Hello Server!');};// 接收到消息ws.onmessage = (e) => {console.log('Message received:', e.data);setMessages((prevMessages) => [...prevMessages, e.data]);};// 连接关闭ws.onclose = (e) => {console.log('WebSocket connection closed:', e.reason);};// 连接错误ws.onerror = (e) => {console.error('WebSocket error:', e.message);};setSocket(ws);// 清理资源return () => {if (ws.readyState === WebSocket.OPEN) {ws.close();}};}, []);const sendMessage = () => {if (socket) {socket.send(message);setMessage('');}};return (<View style={styles.container}><Text style={styles.title}>WebSocket Example</Text><View style={styles.inputContainer}><TextInputstyle={styles.input}value={message}onChangeText={setMessage}placeholder="Type a message"/><Button title="Send" onPress={sendMessage} /></View><View style={styles.messagesContainer}>{messages.map((msg, index) => (<Text key={index} style={styles.message}>{msg}</Text>))}</View></View>);
};const styles = StyleSheet.create({container: {flex: 1,padding: 20,backgroundColor: '#fff',},title: {fontSize: 20,fontWeight: 'bold',marginBottom: 10,},inputContainer: {flexDirection: 'row',alignItems: 'center',marginBottom: 10,},input: {flex: 1,height: 40,borderColor: '#ccc',borderWidth: 1,paddingHorizontal: 10,marginRight: 10,},messagesContainer: {flex: 1,borderTopWidth: 1,borderColor: '#ccc',paddingTop: 10,},message: {fontSize: 16,marginBottom: 5,},
});export default WebSocketExample;

解释:

  • 创建 WebSocket 连接:

    • 使用 new WebSocket('wss://echo.websocket.org') 创建一个 WebSocket 连接。
    • wss 表示安全的 WebSocket 连接,使用 TLS 加密。
  • 连接事件:

    • onopen:连接打开时触发,可以发送初始消息。
    • onmessage:接收到消息时触发,更新状态。
    • onclose:连接关闭时触发。
    • onerror:连接出错时触发。
  • 发送消息:

    • 调用 socket.send(message) 发送消息到服务器。
  • 清理资源:

    • 在组件卸载时,检查 WebSocket 连接是否打开,如果打开则关闭连接。

作者简介

前腾讯电子签的前端负责人,现 whentimes tech CTO,专注于前端技术的大咖一枚!一路走来,从小屏到大屏,从 Web 到移动,什么前端难题都见过。热衷于用技术打磨产品,带领团队把复杂的事情做到极简,体验做到极致。喜欢探索新技术,也爱分享一些实战经验,帮助大家少走弯路!

温馨提示:可搜老码小张公号联系导师

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/18156.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【蓝牙协议栈】【BLE】【BAS】精讲蓝牙电池服务

1. 蓝牙电池服务(Bluetooth Battery Service)概念 蓝牙电池服务是蓝牙设备与其他设备通信时用于报告其剩余电池电量的标准服务。它让用户能够随时了解蓝牙设备(如无线耳机、智能手表、蓝牙鼠标/键盘等)的电池状态,从而方便地管理这些设备的续航与电源使用。 BAS通常用于在…

dnaMethyAge包学习笔记

1.introduction 许多对甲基化年龄进行计算的文章都是采用网站实现计算的&#xff0c;能够实现对甲基化年龄的计算的R包相对比较少&#xff0c;其中应用最广的是dnaMethyAge包。作者本想寻找能够计算Grimage和Grimage2的R包&#xff0c;奈何没有寻找到&#xff0c;因此只能记录一…

详解八大排序(四)------(归并排序)

文章目录 前言&#xff1a;1 递归版本&#xff08;MergeSort&#xff09;1.1 核心思路1.2 实现代码 2 非递归版本&#xff08;MergeSortNonR&#xff09;2.1 核心思路2.2 实现代码 3.完整代码 前言&#xff1a; 归并排序的核心思路是把数组里面的数两两分成一组&#xff0c;组内…

商城小程序的流程渠道拓展

传统印象里&#xff0c;小程序的开发制作似乎很难&#xff0c;尤其是商城类型且功能体系完善的&#xff0c;事实也确实如此&#xff0c;没有较高的技术和成本投入或团队各个流程的专业人员合作&#xff0c;很难开发出来成品&#xff0c;或者质量较低。 当然对于大公司来说&…

小程序-基于java+SpringBoot+Vue的超市购物系统设计与实现

项目运行 1.运行环境&#xff1a;最好是java jdk 1.8&#xff0c;我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境&#xff1a;IDEA&#xff0c;Eclipse,Myeclipse都可以。推荐IDEA; 3.tomcat环境&#xff1a;Tomcat 7.x,8.x,9.x版本均可 4.硬件环境&#xff1a…

Android开发-Pokémon界面设计

实现效果图&#xff0c;还没更新完 二、功能说明&#xff1a; 在上次实验的基础之上把recycleviewb列表完善并且增加点击效果&#xff0c;点击之后可以跳转到另外一个activity上&#xff0c;并且添加返回按钮&#xff0c;可以放回原列表页面&#xff0c;列表中的每一行都对应的…

jenkins的安装(War包安装)

‌Jenkins是一个开源的持续集成工具&#xff0c;基于Java开发&#xff0c;主要用于监控持续的软件版本发布和测试项目。‌ 它提供了一个开放易用的平台&#xff0c;使软件项目能够实现持续集成。Jenkins的功能包括持续的软件版本发布和测试项目&#xff0c;以及监控外部调用执行…

HopToDesk 安全加密、免费开源,远程桌面新选择!

远程桌面工具越来越成为现代工作生活的刚需。你是否还在为寻找一个既安全又免费的工具而苦恼&#xff1f;HopToDesk&#xff0c;一款支持安全加密、免费开源的远程桌面软件&#xff0c;或许正是你的不二之 HopToDesk与传统的远程桌面工具相比有哪些独特优势&#xff1f;它如何…

yum工具的学习

Linux下安装软件的方法 1.源代码安装 2.rmp包安装 3.包管理器进行安装 --- yum/apt Linux下载软件的过程 操作系统的好坏评估 -- 生态问题 yum具体操作 Linux软件安装所有人都能用&#xff0c;是以other的身份去执行可执行程序 文件拷贝&#xff08;sudo&#xff09;-- &g…

react 如何修改弹出的modal的标题

原来标题的样子&#xff1a; 修改为&#xff1a; 实现方式&#xff1a; <Modal title<span>股价趋势/{this.state.pccode}</span> visible{this.state.isPriceModalOpen} style{{ top: 20 }} width{1320} height{400} footer{null} onCancel{()>this.hideMo…

计算机网络-理论部分(一):概览

重点 计算机网络的重点是协议&#xff0c;各种协议&#xff0c;每种协议都有自己对应的应用场景以及对应功能&#xff0c;学好协议&#xff0c;就学好了计算机努网络。 协议分层 协议分层围绕数据的传递展开。数据的传递需要包括&#xff1a;打包数据&#xff0c;控制传递&a…

开源科学工程技术软件介绍 – EDA工具KLayout

link 今天向各位知友介绍的 KLayout是一款由德国团队开发的开源EDA工具。 KLayout是使用C开发的&#xff0c;用户界面基于Qt。它支持Windows、MacOS和Linux操作系统。安装程序可以从下面的网址下载&#xff1a; https://www.klayout.de/build.html KLayout图形用户界面&…

SpringMVC的视图

目录 一.视图分类 &#xff08;1&#xff09;转发视图&#xff08;Forward View&#xff09;&#xff1a; &#xff08;2&#xff09;重定向视图&#xff08;Redirect View&#xff09;&#xff1a; &#xff08;3&#xff09;其他视图技术 二.转发视图 三.重定向视图 四…

Spring IOCDI

1. 什么是Spring 前面介绍了Spring Boot&#xff0c;Spring MVC&#xff0c;那么Spring和他们之间有什么关系呢&#xff1f; Spring简单一句话总结就是&#xff1a;它是一个包含众多工具方法的IOC容器。前面我们也接触过容器&#xff0c;比如List/Map&#xff0c;他俩是数据存…

螺旋矩阵II(leetcode 59)

转圈过程&#xff08;边界处理&#xff09;遵循循环不变量的原则&#xff0c;坚持一个原则处理每一条边&#xff0c;左闭右开处理 class Solution { public:vector<vector<int>> generateMatrix(int n) {vector<vector<int>> num(n, vector<int>…

Vue 中的透传,插槽,依赖注入

1. 透传attributes 在组件上使用透传attribute&#xff1a; 当你在父组件中使用子组件时&#xff0c;你可以添加一些attribute到子组件上&#xff0c;即使这些attribute没有在子组件的props中声明。 父组件&#xff1a; <!-- 父组件&#xff0c;例如 ParentComponent.vue…

基于K8S1.28.2实验rook部署ceph

基于K8S1.28.2实验rook部署ceph 原文链接&#xff1a; 基于K8S1.28.2实验rook部署ceph | 严千屹博客 Rook 支持 Kubernetes v1.22 或更高版本。 rook版本1.12.8 K8S版本1.28.2 部署出来ceph版本是quincy版本 主机名ip1(NAT)系统新硬盘磁盘内存master1192.168.48.101Centos7.910…

node.js中express的基本了解

定义 Express是基于Node.js平台&#xff0c;快速、开放、极简的Web开发框架。 本质 Express是一个npm上的第三方包&#xff0c;提供了快速创建Web服务器的便捷方法。 作用 与Node.js内置的http模块类似&#xff0c;Express也是专门用来创建Web服务器的&#xff0c;但它极大地简…

容器运行时 AND Docker

容器运行时 and Docker 什么是Docker Docker 使用 Google 公司推出的 Go 语言 进行开发实现&#xff0c;基于 Linux 内核的 cgroup&#xff0c;namespace&#xff0c;以及 AUFS 类的 Union FS 等技术&#xff0c;对进程进行封装隔离&#xff0c;属于 操作系统层面的虚拟化技术…

基于Python深度学习的【垃圾识别系统】实现~TensorFlow+人工智能+算法网络

一、介绍 垃圾识别分类系统。本系统采用Python作为主要编程语言&#xff0c;通过收集了5种常见的垃圾数据集&#xff08;‘塑料’, ‘玻璃’, ‘纸张’, ‘纸板’, ‘金属’&#xff09;&#xff0c;然后基于TensorFlow搭建卷积神经网络算法模型&#xff0c;通过对图像数据集进…