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来改变自身状态。