जेएस वेबसाईट क्लाइंट के रूप में कैसे प्रतिक्रिया करता है?

मैं एक वेबसाइट आधारित क्लाइंट-सर्वर एप्लिकेशन बनाना चाहता हूं। उसमें मैं नोड जेएस websocket सर्वर बनाया गया है जो ग्राहकों के लिए इंतजार कर रहा है। अब मैं प्रतिक्रिया जेएस websocket क्लाइंट बनाना चाहता हूँ। मैं एक वेबसाईट के रूप में प्रतिक्रिया जेएस का उपयोग कर रहा हूं क्योंकि मुझे निरंतर तत्व प्रस्तुत करना होगा जो सर्वर एक साधारण पाठ संदेश के रूप में भेजता है।जेएस वेबसाईट क्लाइंट के रूप में कैसे प्रतिक्रिया करता है?

मैं प्रतिक्रिया जेएस को वेबसाईट क्लाइंट के रूप में लागू करने पर मारा गया हूं। यह कैसे एक WebSocket ग्राहक के रूप में काम करना चाहिए और कैसे यह WebSocket सर्वर सिर्फ इस तरह के अनुरोध भेजेगा:

'ws://localhost:1234'

मैं WebSocket ग्राहक के बारे में अधिक जानना चाहते हैं और यह भी इस समस्या को हल करना चाहते हैं?

स्रोत

2016-06-30 kit

मैं आप पढ़ सकते हैं इस https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications, किसी भी अन्य प्रश्न पूछने से पहले सुझाव देना चाहेंगे। –

ठीक है ... इस पृष्ठ को पढ़ें ... लेकिन मैं इसे प्रतिक्रिया जेएस में कार्यान्वित करना चाहता हूं ... मेरा सवाल यह है कि मैं केवल प्रतिक्रिया जेएस में वेबस्केट क्लाइंट को कैसे कार्यान्वित कर सकता हूं? – kit

यह एक ध्वनि ट्यूटोरियल लगता है https://www.alfresco.com/blogs/devops/2015/07/07/how-i-probably-over-simplified-integrated-web-sockets-messaging-and-reactjs-components/ –

इतना भूमि के ऊपर के बिना एक बहुत ही बुनियादी उदाहरण दो बातें की आवश्यकता होगी:

एक संदर्भ के साथ एक घटक कनेक्शन WebSocket को
कनेक्शन पर एक घटना श्रोता कि घटक की स्थिति को अद्यतन करता जब कोई संदेश आए

डेमो: http://jsfiddle.net/69z2wepo/47360/

const Echo = React.createClass({ 
    getInitialState(){ 
    return { messages : [] } 
    }, 
    componentDidMount(){ 
    // this is an "echo" websocket service for testing pusposes 
    this.connection = new WebSocket('wss://echo.websocket.org'); 
    // listen to onmessage event 
    this.connection.onmessage = evt => { 
     // add the new message to state 
     this.setState({ 
     messages : this.state.messages.concat([ evt.data ]) 
     }) 
    }; 

    // for testing: sending a message to the echo service every 2 seconds, 
    // the service sends it right back 
    setInterval(_ =>{ 
     this.connection.send(Math.random()) 
    }, 2000) 
    }, 
    render: function() { 
    // render the messages from state: 
    return <ul>{ this.state.messages.map((msg, idx) => <li key={'msg-' + idx }>{ msg }</li>)}</ul>; 
    } 
});

स्रोत

2016-06-30 13:04:43 pawel

- अरे, यह अच्छा लगता है ... लेकिन मुझे ** खराब JSFiddle कॉन्फ़िगरेशन का सामना करना पड़ रहा है, कृपया मूल प्रतिक्रिया JSFiddle ** त्रुटि को फोर्क करें, मुझे लगता है कि मेरी संरचना मान्य नहीं है, कृपया मुझे बताएं कि मेरे प्रतिक्रिया ऐप के लिए संरचना कैसे बनाएं ? यानी एचटीएमएल, जेएस, webpack.config.js और package.json – kit

आपको यह त्रुटि कहां मिलती है? मेरे जवाब में जुड़े डेमो फीडल पर? – pawel

हाँ ... मैं बस जेएस कोड एन बदल रहा हूँ ws url और एचटीएमएल में हम इस

Just create rest program from server side and create the connection at Web page 

var connection = new WebSocket('ws://localhost/echo', ['soap', 'xmpp']); 

opening the connection 
connection.onopen = function() { 
    connection.send('Ping'); // 
}; 


connection.onerror = function (error) { 
    console.log('WebSocket Error ' + error); 
}; 

//to receive the message from server 
connection.onmessage = function (e) { 
    console.log('Server: ' + e.data); 
}; 

// Sending String 
connection.send('your message'); 


At server side you will get session and message ,So you can do communication with N sessions

स्रोत

2016-06-30 13:14:48

संबंधित मुद्दे

जेएस वेबसाईट क्लाइंट के रूप में कैसे प्रतिक्रिया करता है?

उत्तर

संबंधित मुद्दे