我想创建一个基于 Websocket 的客户端 - 服务器应用程序。在那我创建了节点 js websocket 服务器，它正在等待客户端。现在我想创建 react js websocket 客户端。我将 react js 用作 websocket，因为我必须连续呈现服务器作为简单文本消息发送的元素。
我对将 react js 实现为 websocket 客户端感到震惊。它应该如何作为 websocket 客户端工作，以及它如何像这样向 websocket 服务器发送请求：
'ws://localhost:1234'
我想了解更多关于 websocket 客户端的信息，也想解决这个问题？
所以一个没有太多开销的非常基本的例子需要两件事：
一个引用 websocket 连接的组件
连接上的事件侦听器，用于在消息到达时更新组件的状态
演示：http : //jsfiddle.net/69z2wepo/47360/
演示（2019）：http : //jsfiddle.net/643atLce/
class Echo extends React.Component {
constructor(props){
super(props);
this.state = { messages : [] }
}
componentDidMount(){
// this is an "echo" websocket service
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 purposes: sending to the echo service which will send it back back
setInterval( _ =>{
this.connection.send( Math.random() )
}, 2000 )
}
render() {
// slice(-5) gives us the five most recent messages
return <ul>{ this.state.messages.slice(-5).map( (msg, idx) => <li key={'msg-' + idx }>{ msg }</li> )}</ul>;
}
};
只需从服务器端创建休息程序并在网页上创建连接。
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');
在服务器端，您将获得会话和消息，因此您可以与 N 个会话进行通信。
在 App.js 的 react Project 文件夹中，添加一个 websocket 连接并监听来自 websocket 服务器的消息。
class App extends React.Component{
constructor(){
super();
this.state={
endpoint:"ws://localhost:1234",
messages:[]
}
}
componentDidMount(){
//initialize connection
const ws = new WebSocket(this.state.endpoint)
ws.onopen = () =>{
//send any msg from Client if needed
ws.send(JSON.stringify(temp))
}
//save whatever response from client
ws.onmessage = evt =>{
this.setState({
message:this.state.message.concat(evt.data)
})
}
}
render(){
return(
<div>
<p>{this.state.message.map(items=><li>{items}</li>)}</p>
</div>
)}
}
我在这里留下一个功能示例（以上都是对象......）
const client = new WebSocket(ws://stream.marketpricesfun.com)
const [cottonPrice, setCottonPrice] = useState(0)
useEffect(() => {
client.onopen = () => {
client.send('{"topic": "subscribe", "to": "newPrices"}')
}
client.onmessage = (message) => {
if (message.data) {
const parsedData = JSON.parse(message.data)
setCottonPrice(parsedData.cotton.price)
}
}
return () => {
client.close()
}
}, [])