socket.io-client实时通讯，⽤socket.io-client的坑
前⾔：
由于项⽬需要，前端所渲染的数据，要从后端(PHP)实时主动推送到前端（前端也可以实时主动推送到后端，以前的做法是在前端⽤定时任务，隔多少时间后就请求⼀下后端API），所以就不像平时⽤Ajax、Fetch、Axios等来调⽤后端的API接⼝了，这次采⽤的是WebSocket⽅式（），现在的WebAPI中本⾝就⽀持WebSocket的，所有可以前端可以直接调，但是使⽤WebSocket还要搭建后端服务等，
由于这次项⽬⽐较急，所以就接⽤了第三⽅封好的框架：，
workerman是⼀个⾼性能的PHP socket 服务器框架，workerman基于PHP多进程以及libevent事件轮询库，PHP开发者只要实现⼀两个接⼝，便可以开发出⾃⼰的⽹络应⽤，例如Rpc服务、聊天室服务器、⼿机游戏服务器等。
workerman的⽬标是让PHP开发者更容易的开发出基于socket的⾼性能的应⽤服务，⽽不⽤去了解PHP socket以及PHP多进程细节。 workerman本⾝是⼀个PHP多进程服务器框架，具有PHP进程管理以及socket通信的模块，所以不依赖php-fpm、nginx或者apache等这些容器便可以独⽴运⾏。
提⽰，我遇到坑的地⽅ 或 要注意的地⽅，我都⽤红⾊字体标注了。
安装：
这次前端是⽤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是可以⾃定义的，只要和后端约定好可⾏了！！) ('init', (data) => {
console.log(data); //这是后端推送过来的数据
this.setState({
news: data
});
});
let msg = '我是前端向后端发送的数据！！';
//向后端发送数据
//后端在接收时也就是监听send就可以得到前端传过来的数据了
};
componentWillMount() {
};
componentDidMount() {
};
render() {
return (
<section className="main">
<ul className="news-box">
<li>
{
ws.map((item, index) =>{
return (`<b>${item.num}</b> <span>${t}</span>`)
})
}
</li>
</ul>
</section>
);
};
};
⽅法说明：
<()⽅法：
- ()⽤于监听获取服务端（后端）发送过来的数据
-
('monitorName', callBack)有两个参数：
+ monitorName：是监听的标识，是⾃定义的，只要和后端约定好可⾏了！！) + callBack：是⼀个回调函数，⾥⾯的参数就是后端发送过来的数据
- it()⽤于向服务端（后端）发送数据
- it('monitorName', sendData)有两个参数：
+ monitorName：是监听的标识，是⾃定义的，只要和后端约定好可⾏了！！) + sendData：可以是字符串，也可以是{}JSON对象，这是向后端发送过去的数据
<()⽅法和 it()⽅法在前后端是成对出现的
后端向前端推送数据时，前后端的写法：
后端：
前端：
<('news', function(data) {
console.log(data)
});
前端向后端推送数据时，前后端的写法：
后端：
websocket和socket<('send', function(data) {
console.log(data)
});
前端：
后端在向前端发送时定义的标识是 news，前端在接收时也是news
前端在向后端发送时定义的标识是 send，后端在接收时也是send
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论