2015-12-27 29 views
20

के साथ सॉकेट.ओ को कार्यान्वित करना मुझे अपने प्रोजेक्ट में सॉकेटियो क्लाइंट को शामिल करने में समस्या हो रही है क्योंकि मेरे पास प्रोजेक्ट सेट अपसोर्फिक रूप से है। मेरे बेस एचटीएमएल में सॉकेट फ़ाइल को शामिल करने के बाद, मैं अपने घटकों में से किसी एक के घटकडिडमाउंट में let socket = io(); पर कॉल करने का प्रयास करता हूं, हालांकि शुरुआत में इसे मेरे कंसोल में लॉगिंग करने के बाद यह अनिर्धारित है। जब मैं एक अलग घटक के लिए मार्ग और उस सॉकेट चर के साथ उस घटक पर वापसी करता हूं तो यह कुछ डेटा से भर जाता है। मुझे लगता है कि यह मेरा मुद्दा है कि यह मेरे घटक में शुरू नहीं हो रहा है कि सॉकेट क्या है, ऐसा लगता है कि इसे इंतजार करना है कि मैं इस पर कैसे काम करूं?ReactJS ES6

Component.jsx

componentDidMount() { 
    let socket = io(); 
    console.log(socket); 
    } 

Base.html

<!doctype html> 
<html lang=""> 

<head> 
    <title>TITLE</title> 

    META 

    LINK 

</head> 

<div class="app">CONTENT</div> 

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> 
<script> 
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 
    ga('create', 'UA-XXXXX-X', 'auto'); 
    ga('send', 'pageview'); 
</script> 
<script type="text/javascript" charset="utf-8" src="/assets/app.js"></script> 

<script src="/socket.io/socket.io.js"></script> 
<script> 
     var socket = io(); 
</script> 

</body> 
</html> 

यह btw मैं पर की तरह सामान के लिए सर्वर से कनेक्ट ठीक काम करता है, यह उत्सर्जन करता है कि एक उपयोगकर्ता को जोड़ने और सर्वर बंद डिस्कनेक्ट करने है , बस क्लाइंट मैनिपुलेशन ने मुझे परेशान किया है।

+0

क्या आप वेबपैक या ब्राउज़र की तरह मॉड्यूल बंडलर का उपयोग कर रहे हैं? – azium

+0

हाँ मैं हूँ! वेबपैक, तो मुझे किसी प्रकार की पुस्तकालय की आवश्यकता क्यों होनी चाहिए? – Karan

+0

आप अपने मूल घटक में सॉकेट आयात कर सकते हैं और यदि आवश्यक हो, तो इसे props.https: //www.npmjs.com/package/socket.io-client के साथ पास करें। यहां मेरी परियोजनाओं में से एक उदाहरण है https://github.com/zen-games/ui/blob/develop/src/components/App.js – azium

उत्तर

54

संभावना अन्य समाधान कर रहे हैं, लेकिन मेरे लिए निम्नलिखित काम करता है:

1) NPM सभी घटकों सॉकेट कार्यक्षमता की जरूरत है कि के सबसे जड़ घटक में socket client side package

2) आयात सॉकेट स्थापित

3) जोड़ने का काम जीवन चक्र घटनाओं में से एक (constructor/componentWillMount में सर्वर साइड सॉकेट घटना श्रोताओं, componentDidMount)

4) नीचे जुर्राब पारित रंगमंच की सामग्री के माध्यम से एट वस्तु अगर यह समझ में आता है बच्चे घटकों

उदाहरण में कुछ सर्वर के ईवेंट प्रबंधित करने:

import io from 'socket.io-client' 
let socket = io(`http://localhost:8000`) 

class App extends Component { 
    state = { data: {} } 

    componentDidMount() {  
    socket.on(`server:event`, data => { 
     this.setState({ data }) 
    }) 
    } 

    sendMessage = message => { 
    socket.emit(`client:sendMessage`, message) 
    } 

    render() { 
    return (
     <Child 
     socket = { socket } 
     sendMessage = { this.sendMessage } 
     /> 
    ) 
    } 
} 
0

मैं socket.io के साथ एक ही अजीब समस्या थी और प्रतिक्रिया। मैं अपने main.jsx फ़ाइल से अन्य घटकों के प्रोप के साथ निर्भरता इंजेक्शन की स्पष्ट रेखा निर्धारित करना चाहता था। बाहर निकला कि मुझे केवल इस तरह io शुरू करना पड़ा था ...

const socket = window.io(); 

और वह था। इसने काम कर दिया।