หน้าแรก>ซอร์สโค้ด .NET>หมวดหมู่อื่นๆ
ดาวน์โหลด

react-native-tcp-socket

ตอบสนอง Socket API TCP Native สำหรับ Android, iOS & MacOS ด้วย การสนับสนุน SSL/TLS ช่วยให้คุณสร้างไคลเอนต์ TCP และซ็อกเก็ตเซิร์ฟเวอร์เลียนแบบ NET และฟังก์ชัน TLS API ของ Node ของ Node (ตรวจสอบ API ที่มีอยู่สำหรับข้อมูลเพิ่มเติม)

สารบัญ

  • เริ่มต้น
    • Overriding net
    • เอาชนะ tls
    • ใช้ React Native> = 0.60
    • SSL ที่ลงนามในตัวเอง (มีเฉพาะสำหรับ React Native> 0.60)
    • ใช้ React Native <0.60
  • ตอบสนองความเข้ากันได้ของเนทีฟ
  • การใช้งาน
    • ตัวอย่างไคลเอนต์
    • ตัวอย่างเซิร์ฟเวอร์
    • ตัวอย่างไคลเอนต์ TLS
    • ตัวอย่างเซิร์ฟเวอร์ TLS
  • API
    • สุทธิ
      • ซ็อกเก็ต
      • เซิร์ฟเวอร์
    • TLS
      • tlssocket
      • tlsserver
  • ผู้ดูแล
  • กิตติกรรมประกาศ
  • ใบอนุญาต

เริ่มต้น

ติดตั้งไลบรารีโดยใช้เส้นด้าย: 

 yarn add react-native-tcp-socket

หรือ NPM: 

 npm install --save react-native-tcp-socket

Overriding net

เนื่องจาก react-native-tcp-socket เสนอ API เช่นเดียวกับ NET ของ Node ในกรณีที่คุณต้องการนำเข้าโมดูลนี้เป็น net หรือการใช้งาน require('net') ใน JavaScript ของคุณคุณต้องเพิ่มบรรทัดต่อไปนี้ลงในไฟล์ package.json ของคุณ 

{
  "react-native" : {
    "net" : " react-native-tcp-socket "
  }
}

นอกจากนี้เพื่อให้ได้รับประเภท TS (หรือการเติมข้อความอัตโนมัติ) ที่จัดทำโดยโมดูลนี้คุณต้องเพิ่มไฟล์ประกาศที่กำหนดเองต่อไปนี้ 

...
declare module 'net' {
    import TcpSockets from 'react-native-tcp-socket' ;
    export = TcpSockets ;
}

หากคุณต้องการหลีกเลี่ยงประเภท net ที่ซ้ำกันตรวจสอบให้แน่ใจว่าจะไม่ใช้ node_modules/@types ในคุณสมบัติ tsconfig.json "typeRoots" ของคุณ

ตรวจสอบแอปตัวอย่างที่มีให้สำหรับตัวอย่างการทำงาน

เอาชนะ tls

เช่นเดียวกับโมดูล tls อย่างไรก็ตามคุณควรตระหนักถึงสิ่งต่อไปนี้:

  • คลาส Server ที่ส่งออกโดยค่าเริ่มต้นไม่ใช่ TLS ในการใช้เซิร์ฟเวอร์ TLS คุณต้องใช้คลาส TLSServer คุณสามารถแทนที่คลาส Server เริ่มต้น ( tls.Server = tls.TLSServer ) เช่นเดียวกันกับ createServer() และ connect() ในการใช้วิธี TLS คุณต้องใช้เมธอด createTLSServer() และ connectTLS() ตามลำดับ คุณสามารถแทนที่วิธีการเริ่มต้น ( tls.createServer = tls.createTLSServer และ tls.connect = tls.connectTLS )
  • โมดูล tls ของ Node ต้องการคีย์และใบรับรองที่จะให้เป็นสตริง อย่างไรก็ตามโมดูล react-native-tcp-socket ต้องการให้นำเข้าด้วย require()

นอกจากนี้เพื่อให้ได้รับประเภท TS (หรือการเติมข้อความอัตโนมัติ) ที่จัดทำโดยโมดูลนี้คุณต้องเพิ่มไฟล์ประกาศที่กำหนดเองต่อไปนี้ 

...
declare module 'tls' {
    import TcpSockets from 'react-native-tcp-socket' ;
    export const Server = TcpSockets . TLSServer ;
    export const TLSSocket = TcpSockets . TLSSocket ;
    export const connect = TcpSockets . connectTLS ;
    export const createServer = TcpSockets . createTLSServer ;
}

ตรวจสอบแอปตัวอย่างที่มีให้สำหรับตัวอย่างการทำงาน

ใช้ React Native> = 0.60

การเชื่อมโยงแพ็คเกจด้วยตนเองไม่จำเป็นต้องใช้ Autolinking อีกต่อไป

  • แพลตฟอร์ม iOS:

    $ cd ios && pod install && cd .. # cocoapods บน iOS ต้องการขั้นตอนพิเศษนี้

  • แพลตฟอร์ม Android:

    แก้ไขการกำหนดค่า android/build.gradle ของคุณเพื่อให้ตรงกับ minSdkVersion = 21 : 

     buildscript {
  ext {
    ...
    minSdkVersion = 21
    ...
  }

SSL ที่ลงนามในตัวเอง (มีเฉพาะสำหรับ React Native> 0.60)

ในการสร้างไฟล์ที่ต้องการ (คีย์และใบรับรอง) สำหรับ SSL ที่ลงนามด้วยตนเองคุณสามารถใช้คำสั่งต่อไปนี้: 

 openssl genrsa -out server-key.pem 4096
openssl req -new -key server-key.pem -out server-csr.pem
openssl x509 -req -in server-csr.pem -signkey server-key.pem -out server-cert.pem
openssl pkcs12 -export -out server-keystore.p12 -inkey server-key.pem -in server-cert.pem

หมายเหตุ: server-keystore.p12 ต้องไม่มีรหัสผ่าน

คุณจะต้องใช้ไฟล์ Metro.Config.js เพื่อใช้ใบรับรอง SSL ที่ลงนามด้วยตนเอง คุณควรมีไฟล์นี้ในไดเรกทอรีรูทโปรเจ็กต์ของคุณแล้ว แต่ถ้าคุณไม่สร้างมันขึ้นมา ภายในวัตถุ module.exports ให้สร้างคีย์ที่เรียกว่า resolver ด้วยวัตถุอื่นที่เรียกว่า assetExts ค่าของ assetExts ควรเป็นอาร์เรย์ของส่วนขยายไฟล์ทรัพยากรที่คุณต้องการสนับสนุน

หากคุณต้องการใช้ไฟล์ .pem และ .p12 (รวมถึงไฟล์ที่รองรับทั้งหมดแล้ว), metro.config.js ของคุณควรมีลักษณะเช่นนี้: 

 const { getDefaultConfig } = require ( 'metro-config' ) ;
const defaultConfig = getDefaultConfig . getDefaultValues ( __dirname ) ;

module . exports = {
  resolver : {
    assetExts : [ ... defaultConfig . resolver . assetExts , 'pem' , 'p12' ] ,
  } ,
  // ...
} ;

ใช้ React Native <0.60

จากนั้นคุณต้องเชื่อมโยงส่วนดั้งเดิมของไลบรารีสำหรับแพลตฟอร์มที่คุณใช้ วิธีที่ง่ายที่สุดในการเชื่อมโยงไลบรารีคือการใช้เครื่องมือ CLI โดยเรียกใช้คำสั่งนี้จากรูทของโครงการของคุณ:

$ react-native link react-native-tcp-socket

หากคุณไม่สามารถหรือไม่ต้องการใช้เครื่องมือ CLI คุณสามารถเชื่อมโยงไลบรารีด้วยตนเองโดยใช้คำแนะนำด้านล่าง (คลิกที่ลูกศรเพื่อแสดง):

เชื่อมโยงห้องสมุดด้วยตนเองบน iOS
  1. ใน Xcode ใน Project Navigator คลิกขวาที่ Libraries Add Files to [your project's name]
  2. ไปที่ node_modules react-native-tcp-socket และเพิ่ม TcpSockets.xcodeproj
  3. ใน Xcode ใน Project Navigator เลือกโครงการของคุณ เพิ่ม libTcpSockets.a ไปยัง Build Phases ของโครงการของคุณ Link Binary With Libraries
  4. เรียกใช้โครงการของคุณ ( Cmd+R ) <
เชื่อมโยงไลบรารีด้วยตนเองบน Android
  1. เปิด android/app/src/main/java/[...]/MainApplication.java
  • เพิ่ม import com.asterinet.react.tcpsocket.TcpSocketPackage; ไปยังการนำเข้าที่ด้านบนของไฟล์
  • เพิ่ม new TcpSocketPackage() ลงในรายการที่ส่งคืนโดยเมธอด getPackages()
  1. ผนวกบรรทัดต่อไปนี้เข้ากับ android/settings.gradle : 
     include ':react-native-tcp-socket'
project(':react-native-tcp-socket').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-tcp-socket/android')
  2. แทรกบรรทัดต่อไปนี้ภายในบล็อกการพึ่งพาใน android/app/build.gradle : 
      implementation project(':react-native-tcp-socket')

ตอบสนองความเข้ากันได้ของเนทีฟ

ในการใช้ไลบรารีนี้คุณต้องแน่ใจว่าคุณใช้ React Native เวอร์ชันที่ถูกต้อง หากคุณใช้ React Native รุ่นที่ต่ำกว่า 0.60 คุณจะต้องอัพเกรดก่อนที่จะพยายามใช้เวอร์ชันล่าสุด

เวอร์ชัน react-native-tcp-socket เวอร์ชัน Native React ที่จำเป็น
6.XX , 5.XX , 4.XX , 3.XX >= 0.60.0
1.4.0 >= Unknown

การใช้งาน

นำเข้าห้องสมุด: 

 import TcpSocket from 'react-native-tcp-socket' ;
// const net = require('react-native-tcp-socket');
// const tls = require('react-native-tcp-socket');

ตัวอย่างไคลเอนต์ 

 const options = {
  port : port ,
  host : '127.0.0.1' ,
  localAddress : '127.0.0.1' ,
  reuseAddress : true ,
  // localPort: 20000,
  // interface: "wifi",
} ;

// Create socket
const client = TcpSocket . createConnection ( options , ( ) => {
  // Write on the socket
  client . write ( 'Hello server!' ) ;

  // Close socket
  client . destroy ( ) ;
} ) ;

client . on ( 'data' , function ( data ) {
  console . log ( 'message was received' , data ) ;
} ) ;

client . on ( 'error' , function ( error ) {
  console . log ( error ) ;
} ) ;

client . on ( 'close' , function ( ) {
  console . log ( 'Connection closed!' ) ;
} ) ;

ตัวอย่างเซิร์ฟเวอร์ 

 const server = TcpSocket . createServer ( function ( socket ) {
  socket . on ( 'data' , ( data ) => {
    socket . write ( 'Echo server ' + data ) ;
  } ) ;

  socket . on ( 'error' , ( error ) => {
    console . log ( 'An error ocurred with client socket ' , error ) ;
  } ) ;

  socket . on ( 'close' , ( error ) => {
    console . log ( 'Closed connection with ' , socket . address ( ) ) ;
  } ) ;
} ) . listen ( { port : 12345 , host : '0.0.0.0' } ) ;

server . on ( 'error' , ( error ) => {
  console . log ( 'An error ocurred with the server' , error ) ;
} ) ;

server . on ( 'close' , ( ) => {
  console . log ( 'Server closed connection' ) ;
} ) ;

ตัวอย่างไคลเอนต์ TLS 

 const options = {
  port : port ,
  host : '127.0.0.1' ,
  localAddress : '127.0.0.1' ,
  reuseAddress : true ,
  // localPort: 20000,
  // interface: "wifi",
  ca : require ( 'server-cert.pem' ) ,
} ;

// Create socket
const client = TcpSocket . connectTLS ( options , ( ) => {
  // Write on the socket
  client . write ( 'Hello server!' ) ;

  // Close socket
  client . destroy ( ) ;
} ) ;

client . on ( 'data' , function ( data ) {
  console . log ( 'message was received' , data ) ;
} ) ;

client . on ( 'error' , function ( error ) {
  console . log ( error ) ;
} ) ;

client . on ( 'close' , function ( ) {
  console . log ( 'Connection closed!' ) ;
} ) ;

ตัวอย่างเซิร์ฟเวอร์ TLS 

 const options = {
  keystore : require ( 'server-keystore.p12' ) ,
} ;


const server = TcpSocket . createTLSServer ( options , function ( socket ) {
  socket . on ( 'data' , ( data ) => {
    socket . write ( 'Echo server ' + data ) ;
  } ) ;

  socket . on ( 'error' , ( error ) => {
    console . log ( 'An error ocurred with SSL client socket ' , error ) ;
  } ) ;

  socket . on ( 'close' , ( error ) => {
    console . log ( 'SSL closed connection with ' , socket . address ( ) ) ;
  } ) ;
} ) . listen ( { port : 12345 , host : '0.0.0.0' } ) ;

server . on ( 'error' , ( error ) => {
  console . log ( 'An error ocurred with the server' , error ) ;
} ) ;

server . on ( 'close' , ( ) => {
  console . log ( 'Server closed connection' ) ;
} ) ;

หมายเหตุ: ในการใช้ใบรับรองที่ลงนามด้วยตนเองตรวจสอบให้แน่ใจว่าได้อัปเดตการกำหนดค่า Metro.Config.js ของคุณ

API

สุทธิ

ที่นี่มีการระบุวิธีการทั้งหมดที่ใช้ใน react-native-tcp-socket ที่เลียนแบบ NET API ของ Node ฟังก์ชันของพวกเขาเทียบเท่ากับวิธีที่ Net ของ Node ให้บริการ (ข้อมูลเพิ่มเติมเกี่ยวกับ #41) อย่างไรก็ตาม วิธีการที่อินเทอร์เฟซแตกต่างจากโหนดถูกทำเครื่องหมายเป็นตัวหนา

  • net.connect(options[, callback])
  • net.createConnection(options[, callback])
  • net.createServer(connectionListener)
  • net.isIP(input)
  • net.isIPv4(input)
  • net.isIPv6(input)

ซ็อกเก็ต

  • วิธีการ:
    • address()
    • destroy([error])
    • end([data][, encoding][, callback])
    • setEncoding([encoding])
    • setKeepAlive([enable][, initialDelay]) - initialDelay ถูกละเว้น
    • setNoDelay([noDelay])
    • setTimeout(timeout[, callback])
    • write(data[, encoding][, callback])
    • pause()
    • ref() - จะไม่มีผลกระทบใด ๆ
    • resume()
    • unref() - จะไม่มีผลกระทบใด ๆ
  • คุณสมบัติ:
    • สืบทอดมาจาก Stream.Writable :
      • writableNeedDrain
    • bytesRead
    • bytesWritten
    • connecting
    • destroyed
    • localAddress
    • localPort
    • remoteAddress
    • remoteFamily
    • remotePort
    • pending
    • timeout
    • readyState
  • กิจกรรม:
    • สืบทอดมาจาก Stream.Readable :
      • 'pause'
      • 'resume'
    • 'close'
    • 'connect'
    • 'data'
    • 'drain'
    • 'error'
    • 'timeout'
net.createConnection()

net.createConnection(options[, callback]) สร้างการเชื่อมต่อ TCP โดยใช้ options ที่กำหนด พารามิเตอร์ options จะต้องเป็น object ที่มีคุณสมบัติต่อไปนี้:

คุณสมบัติ พิมพ์ iOS/macOS Android คำอธิบาย
port <number> ที่จำเป็น . พอร์ตซ็อกเก็ตควรเชื่อมต่อ
host <string> โฮสต์ซ็อกเก็ตควรเชื่อมต่อ ที่อยู่ IP ในรูปแบบ IPv4 หรือ 'localhost' ค่าเริ่มต้น : 'localhost'
localAddress <string> ที่อยู่ท้องถิ่นซ็อกเก็ตควรเชื่อมต่อจาก หากไม่ได้ระบุระบบปฏิบัติการจะตัดสินใจ ขอแนะนำอย่างยิ่ง ในการระบุ localAddress เพื่อป้องกันข้อผิดพลาดในการโอเวอร์โหลดและปรับปรุงประสิทธิภาพ
localPort <number> พอร์ตท้องถิ่นซ็อกเก็ตควรเชื่อมต่อจาก หากไม่ได้ระบุระบบปฏิบัติการจะตัดสินใจ
interface <string> อินเทอร์เฟซซ็อกเก็ตควรเชื่อมต่อจาก หากไม่ได้ระบุจะใช้การเชื่อมต่อที่ใช้งานอยู่ในปัจจุบัน ตัวเลือกคือ: 'wifi', 'ethernet', 'cellular'
reuseAddress <boolean> เปิด/ปิดใช้งานตัวเลือกซ็อกเก็ต Reuseaddress ค่าเริ่มต้น : true

หมายเหตุ : แพลตฟอร์มที่ทำเครื่องหมายว่าใช้ค่าเริ่มต้น

เซิร์ฟเวอร์

  • วิธีการ:
    • address()
    • listen(options[, callback])
    • close([callback])
    • getConnections(callback)
  • คุณสมบัติ:
    • listening
  • กิจกรรม:
    • 'close'
    • 'connection'
    • 'error'
    • 'listening'
Server.listen()

Server.listen(options[, callback]) สร้างซ็อกเก็ตเซิร์ฟเวอร์ TCP โดยใช้ options ที่กำหนด พารามิเตอร์ options จะต้องเป็น object ที่มีคุณสมบัติต่อไปนี้:

คุณสมบัติ พิมพ์ iOS/macOS Android คำอธิบาย
port <number> ที่จำเป็น . พอร์ตซ็อกเก็ตควรฟัง
host <string> โฮสต์ซ็อกเก็ตควรฟัง ที่อยู่ IP ในรูปแบบ IPv4 หรือ 'localhost' ค่าเริ่มต้น : '0.0.0.0'
reuseAddress <boolean> เปิด/ปิดใช้งานตัวเลือกซ็อกเก็ต Reuseaddress ค่าเริ่มต้น : true

หมายเหตุ : แพลตฟอร์มที่ทำเครื่องหมายว่าใช้ค่าเริ่มต้น

TLS

ที่นี่มีการระบุวิธีการทั้งหมดที่ใช้ใน react-native-tcp-socket ที่เลียนแบบ TLS API ของ Node ฟังก์ชั่นของพวกเขาเทียบเท่ากับวิธีที่ TLS ของ Node ให้บริการ อย่างไรก็ตาม วิธีการที่อินเทอร์เฟซแตกต่างจากโหนดถูกทำเครื่องหมายเป็นตัวหนา

  • tls.connectTLS(options[, callback])
  • tls.createTLSServer([options][, secureConnectionListener])

tlssocket

  • วิธีการ:
    • วิธีการทั้งหมดจาก Socket
    • getCertificate() Android เท่านั้น
    • getPeerCertificate() Android เท่านั้น
  • คุณสมบัติ:
    • คุณสมบัติทั้งหมดจาก Socket
  • กิจกรรม:
    • เหตุการณ์ทั้งหมดจาก Socket
    • 'secureConnect'
tls.connectTLS()

tls.connectTLS(options[, callback]) สร้างการเชื่อมต่อซ็อกเก็ต TLS โดยใช้ options ที่กำหนด พารามิเตอร์ options จะต้องเป็น object ที่มีคุณสมบัติต่อไปนี้:

คุณสมบัติ พิมพ์ iOS/macOS Android คำอธิบาย
ca <import> ไฟล์ CA (รูปแบบ .pem) เพื่อเชื่อถือ หากเป็น null จะใช้รายการ SSL ที่เชื่อถือได้เริ่มต้นของอุปกรณ์ มีประโยชน์สำหรับใบรับรองที่ลงนามด้วยตนเอง ตรวจสอบเอกสารสำหรับการสร้างไฟล์ดังกล่าว ค่าเริ่มต้น : null
key <import> ไฟล์คีย์ส่วนตัว (รูปแบบ .pem) ตรวจสอบเอกสารสำหรับการสร้างไฟล์ดังกล่าว
cert <import> ไฟล์ใบรับรองสาธารณะ (รูปแบบ .pem) ตรวจสอบเอกสารสำหรับการสร้างไฟล์ดังกล่าว
androidKeyStore <string> นามแฝงของ Android Keystore
certAlias <string> นามแฝงใบรับรอง Keystore Android
keyAlias <string> นามแฝงคีย์ส่วนตัวของ Android Keystore
... <any> ตัวเลือก socket.connect() อื่น ๆ ที่ยังไม่ได้ระบุไว้

tlsserver

หมายเหตุ : เซิร์ฟเวอร์ TLS มีชื่อว่า Server ใน TLS ของ Node แต่มีชื่อว่า TLSServer ใน react-native-tcp-socket เพื่อหลีกเลี่ยงความสับสนกับคลาส Server

  • วิธีการ:
    • ทุกวิธีจาก Server
    • setSecureContext(options)
  • คุณสมบัติ:
    • คุณสมบัติทั้งหมดจาก Server
  • กิจกรรม:
    • เหตุการณ์ทั้งหมดจาก Server
    • 'secureConnection'
tls.createTLSServer()

tls.createTLSServer([options][, secureConnectionListener]) สร้าง tls.TLSServer ใหม่ หากมีการตั้งค่า secureConnectionListener จะถูกตั้งค่าเป็นผู้ฟังโดยอัตโนมัติสำหรับเหตุการณ์ 'secureConnection' พารามิเตอร์ options จะต้องเป็น object ที่มีคุณสมบัติต่อไปนี้:

คุณสมบัติ พิมพ์ iOS/macOS Android คำอธิบาย
keystore <import> ที่จำเป็น . ร้านค้าคีย์ในรูปแบบ PKCS#12 พร้อมใบรับรองเซิร์ฟเวอร์และคีย์ส่วนตัว ตรวจสอบเอกสารสำหรับการสร้างไฟล์ดังกล่าว

ผู้ดูแล

  • Rapsssito

กิตติกรรมประกาศ

  • ส่วน iOS เดิมแยกจาก @Aprock React-Native-TCP
  • react-native-udp

ใบอนุญาต

ห้องสมุดได้รับการปล่อยตัวภายใต้ใบอนุญาต MIT สำหรับข้อมูลเพิ่มเติมดู LICENSE

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด