socket.io-client 实时通讯，用socket.io-client的坑

说在前面：

---

        由于项目需要，前端所渲染的数据，要从后端(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

提示，我遇到坑的地方 或 要注意的地方，我都用红色字体标注了。

聊天室效果：

http://www.muguilin.com/chathttp://www.muguilin.com

 

依赖安装：

---

后端PHP：

        后端在使用Workerman时还需要安装phpsocket.io才可以哦！

phpsocket.io下载地址：

 PHPSocket.io (workerman.net) 

 

前端React：

        这次前端是用React-cli v16 + socket.io-client来做的，所以直接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
            });
        });


        const msg = '我是前端向后端发送的数据！！';

        //向后端发送数据
        socket.emit('send', { text: msg});
        
        //后端在接收时也就是监听send就可以得到前端传过来的数据了

    };

    componentWillMount() {
        this.getNews();
    };

    componentDidMount() {    
        console.log(this.state);
    };

    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: '向前端的"news"监听发送 新闻列表数据'
        },
    ]
});

        前端代码：

socket.on('news', function(data) {

    console.log('收到了后端"news"发来的数据：', data); 
    
     /*
        [{
            id: 1, 
            text: '向前端的"news"监听发送 新闻列表数据'
        },]
     */
});

   当前端向后端推送数据时，前、后端的写法：

           前端代码：

socket.emit('send', {
    uid: 'u-666', 
    name: 'myName', 
    text: '向后端的"send"监听 发送数据。'
});

        后端代码：           

socket.on('send', function(data) { 

    console.log('收到了前端"send"发来的数据：', data); 

    /*  {
            uid: 'u-666', 
            name: 'myName', 
            text: '向后端的"send"监听 发送数据。'
        }
    */
});

                 

交互说明： 

后端在向前端发送时定义的标识是 news，前端在接收时也是news。

前端在向后端发送时定义的标识是 send，后端在接收时也是send。