首页 >> 大全

socket.io-client 实时通讯,用socket.io

2023-09-08 大全 32 作者:考证青年

说在前面:

由于项目需要,前端所渲染的数据,要从后端(PHP)实时主动推送到前端(前端也可以实时主动推送到后端,以前的做法是在前端用定时任务,隔多少时间后就请求一下后端API),所以就不像平时用Ajax、Fetch、Axios等来调用后端的API接口了,这次采用的是方式(什么是),现在的中本身就支持的,所有可以前端可以直接调,但是使用还要搭建后端服务等,

由于这次项目比较急,所以就接用了第三方封好的框架:,

是一个高性能的PHP 服务器框架,基于PHP多进程以及事件轮询库,PHP开发者只要实现一两个接口,便可以开发出自己的网络应用,例如Rpc服务、聊天室服务器、手机游戏服务器等。

的目标是让PHP开发者更容易的开发出基于的高性能的应用服务,而不用去了解PHP 以及PHP多进程细节。 本身是一个PHP多进程服务器框架,具有PHP进程管理以及通信的模块,所以不依赖php-fpm、nginx或者等这些容器便可以独立运行。

:下载地址:

:官方文档:

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

聊天室效果:

依赖安装:

后端PHP:

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

.io下载地址:

.io ()

前端React:

这次前端是用React-cli v16 + .io-来做的,所以直接npm 或 yarn 就可以直接安装在项目中了!!!

npm install socket.io-client或yarn add socket.io-client

注:安装完成后一定要重新启动一下React服务(npm run start 或 yarn start) 不然在 引入时 io from '.io-'; 会有报错!!! 使用方法:

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 (
  • {this.state.news.map((item, index) =>{return (`${item.num} ${item.content}`)})}
);}; };

方法说明: .on()方法【监听】:

socket.on();    // 用于监听获取服务端(后端)发送过来的数据如:socket.on('monitorName', callBack);参数说明:monitorName:是监听的标识,是自定义的,只要和后端约定好可行了。callBack:是一个回调函数,里面的参数就是后端发送过来的数据。

.emit()方法【发送】:

_socket.io中文文档

socket.emit();    // 用于向服务端(后端)发送数据如:socket.emit('monitorName', sendData);参数说明:monitorName:是监听的标识,是自定义的,只要和后端约定好可行了。sendData:可以是字符串,也可以是{}JSON对象,这是向后端发送过去的数据。

注:.on()方法和.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。

关于我们

最火推荐

小编推荐

联系我们


版权声明:本站内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 88@qq.com 举报,一经查实,本站将立刻删除。备案号:桂ICP备2021009421号
Powered By Z-BlogPHP.
复制成功
微信号:
我知道了