react笔记(2)websocket实时改变数据

项目中有个需求,需要实时改变数据。实时改变数据有两种方式。
第一种方式是通过Ajax轮询,浏览器需要不断的向服务器发出请求,在本项目中需要改变数据的地方有多处,连续的Ajax请求对服务器的压力很大,所以不适合这种方式。
第二种方式是通过HTML5 定义的 WebSocket 协议,使浏览器和服务器保持持久性的连接,服务端向客户端主动推送信息。
本项目中采用了第二种方式,这里对react中使用WebSocket实时改变数据做了一点笔记。

WebSocket简介

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,本质上是一个基于 TCP 的协议。
WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输

WebSocket创建、使用API

创建 WebSocket 对象

1
var ws = new WebSocket(url, [protocol] );

在获取 WebSocket 连接后,可以通过 send 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
ws.onopen = function() {
// Web Socket 已连接上,使用 send() 方法发送数据
ws.send("发送数据");
alert("数据发送中...");
};

ws.onmessage = function (evt) {
var received_msg = evt.data;
alert("数据已接收...");
};
ws.onclose = function() {
// 关闭 websocket
alert("连接已关闭...");
};

react中使用WebSocket

首先抽取一个通用方法开启WebSocket

1
2
3
4
5
6
7
8
9
10
11
export const startWs = () => {
// wss://域名/api/wsname

const host = 'aaa.com';
let protocol = 'wss';
const {host: host2} = window.location;
if (window.location.protocol === 'http:' && host2 !== 'localhost:3000') {
protocol = 'ws';
}
return new WebSocket(`${protocol}://${host}/api/wsname`);
};

在page中使用WebSocket,并将数据传递给组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
export default class Index extends React.Component {
constructor(props) {
super(props);
this.ws = startWs();
}

componentDidMount() {
this.watchWs();
}

componentWillUnmount = () => {
this.ws.close();
}

watchWs = () => {
this.ws.onmessage = (evt) => {
let data = {};
try {
data = JSON.parse(evt.data);
} catch (e) { console.log(e); }
this.setState({
currentData: data,
});
};
}

render() {
const { item, currentData } = this.state;
return (
<div className="pages-index" >
<Item data={item}
currentData={currentData}
/>

</div>)
}
}

组件接受数据后实时改变自身。
这里使用getDerivedStateFromProps这个生命周期,意思就是从props中获取state,即将传入的props映射到state上面,意味着即使你的props没有任何变化,而是父state发生了变化,导致子组件发生了re-render,这个生命周期函数依然会被调用。
getDerivedStateFromProps是一个静态函数,也就是这个函数不能通过this访问到class的属性,也并不推荐直接访问属性。而是应该通过参数提供的nextProps以及prevState来进行判断,根据新传入的props来映射到state。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export default class Item extends React.Component {
constructor(props) {
super(props);
}

static getDerivedStateFromProps(nextProps, prevState) {
const {currentData = {}} = nextProps;
if (currentData !== prevState.currentData) {
return newObj {
attr: attr1
}
}
return null;
}

render() {
const {newObj} = this.state;
return (<div className="components-item">
<div>{newObj.attr}</div>
</div>)

}
}

这里Item组件通过接受父组件的props来改变自身状态。