前言：
由於項目需要，前端所渲染的數據，要從後端(PHP)實時主動推送到前端（前端也可以實時主動推送到後端，以前的做法是在前端用定時任務，隔多少時間後就請求一下後端API），所以就不像平時用Ajax、Fetch、Axios等來調用後端的API接口了，這次採用的是WebSocket方式（什麼是WebSocket），現在的WebAPI中本身就支持WebSocket的，所有可以前端可以直接調，但是使用WebSocket還要搭建後端服務等，
由於這次項目比較急，所以就接用了第三方封好的框架：Workerman，
workerman是一個高性能的PHP socket 服務器框架，workerman基於PHP多進程以及libevent事件輪詢庫，PHP開發者只要實現一兩個接口，便可以開發出自己的網絡應用，例如Rpc服務、聊天室服務器、手機遊戲服務器等。
workerman的目標是讓PHP開發者更容易的開發出基於socket的高性能的應用服務，而不用去了解PHP socket以及PHP多進程細節。 workerman本身是一個PHP多進程服務器框架，具有PHP進程管理以及socket通信的模塊，所以不依賴php-fpm、nginx或者apache等這些容器便可以獨立運行。
Workerman：下載地址：https://www.workerman.net/download
Workerman：官方文檔：http://doc.workerman.net
提示，我遇到坑的地方 或 要注意的地方，我都用紅色字體標註了。
安裝：
這次前端是用React-cli v16來做的，所以直接npm 或 yarn 就可以直接安裝在項目中了！！！
npm install socket.io-client
或
yarn add socket.io-client
注：安裝完成後一定要重新啓動一下React服務(npm run start 或 yarn start)
不然在 引入時 import io from 'socket.io-client'; 會有報錯！！！
使用：
import React, { Component } from "react";
import io from 'socket.io-client';
export default class Main extends Component {
constructor(props) {
super(props);
this.state = {
news: []
};
};
getNews() {
//和後端服務建立鏈接
const socket = io('ws://10.0.3.69:8442');
//監聽後端推送過來的數據(注，init是可以自定義的，只要和後端約定好可行了！！)
socket.on('init', (data) => {
console.log(data); //這是後端推送過來的數據
this.setState({
news: data
});
});
let msg = '我是前端向後端發送的數據！！';
//向後端發送數據
socket.emit('send', { text: msg});
//後端在接收時也就是監聽send就可以得到前端傳過來的數據了
};
componentWillMount() {
this.getNews();
};
componentDidMount() {
};
render() {
return (
<section className="main">
<ul className="news-box">
<li>
{
this.state.news.map((item, index) =>{
return (`<b>${item.num}</b> <span>${item.content}</span>`)
})
}
</li>
</ul>
</section>
);
};
};
方法說明：
socket.on()方法：
- socket.on()用於監聽獲取服務端（後端）發送過來的數據
- socket.on('monitorName', callBack)有兩個參數：
+ monitorName：是監聽的標識，是自定義的，只要和後端約定好可行了！！)
+ callBack：是一個回調函數，裏面的參數就是後端發送過來的數據
socket.emit()方法：
- socket.emit()用於向服務端（後端）發送數據
- socket.emit('monitorName', sendData)有兩個參數：
+ monitorName：是監聽的標識，是自定義的，只要和後端約定好可行了！！)
+ sendData：可以是字符串，也可以是{}JSON對象，這是向後端發送過去的數據
socket.on()方法 和 socket.emit()方法 在前後端是成對出現的!!!
後端向前端推送數據時，前後端的寫法：
後端：
socket.emit('news', {data: [{id: 1, text: '我是向前端發送的新聞列表'}]});
前端：
socket.on('news', function(data) {
console.log(data)
});
前端向後端推送數據時，前後端的寫法：
後端：
socket.on('send', function(data) {
console.log(data)
});
前端：
socket.emit('send', {uid: 'mu-2018', name: 'myName', text: '我是向後端發送的數'});
後端在向前端發送時定義的標識是 news，前端在接收時也是news
前端在向後端發送時定義的標識是 send，後端在接收時也是send