React+Express+socket.io简单样例（2020-11-13）

最新推荐文章于 2024-06-21 09:43:18 发布

正正舞会

最新推荐文章于 2024-06-21 09:43:18 发布

阅读量334

点赞数 1

分类专栏： react 文章标签： reactjs html javascript

本文链接：https://blog.csdn.net/qq_34745908/article/details/109679966

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文档详细介绍了如何在React前端和Express后端项目中使用Socket.IO 2.2.0版本实现跨域实时通信。前端通过`socket.io-client`建立WebSocket连接，监听并发送消息；后端使用Express配置跨域，并响应前端的事件。通过此示例，开发者可以理解如何在两者间建立稳定的实时数据传输通道。

摘要由CSDN通过智能技术生成

本文章用于记录socket.io的相关开发例子

核心中的核心.socket.io 请使用2.2.0版本，最新3.0.2出现io跨域问题且无法解决

1）针对于react前端项目搭建步骤：

1：使用命令 npm install socket.io-client@2.2.0 -S 客户端版本的socket.io

2：新建控件Chatdemo.js

备注：

io的socket一定要用ws://协议

import React from "react"
import io from 'socket.io-client';
const socket = io("ws://127.0.0.1:9999");
//记得这里要用ws协议

class ChatDemo extends React.Component {

    constructor(props) {
        super(props);
        this.sent = this.sent.bind(this);
        this.state = {
            input: "",
            value:""
        }
    }

//用于更改input的价值
    inputvalueonChange=(e)=> {
        this.setState({
            input: e.target.value
        })
    }

//点击按钮事件
    sent() {
        console.log("send")
        //利用socket把数据发送去服务器
        socket.emit("info",this.state.input)

    }


    componentDidMount() {
//加载完页面后添加监听info频道,监听是否有信息发回来
        socket.on("info", (data) => {
            console.log(data.data);
            //如果有信息发回来，则更新span的值和打印下来
            this.setState({
                value:this.state.value+"|||"+data.data
            })

        })
    }

    render() {
        return <div>
            <span >{this.state.value}</span>
            <input onChange={this.inputvalueonChange}/>
            <button onClick={this.sent}>send Text</button>
        </div>;
    }
}

export default ChatDemo;

2）针对于Express后端项目搭建步骤：

1：使用命令 npm install socket.io@2.2.0 -S 客户端版本的socket.io

2：使用命令 npm install express -S 安装express 框架

const express = require('express');
const app = express();
//创建express app
const port = process.env.PORT || 9999;
//配置跨域，当然你用cors也可以
app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", '*');
    res.header("Access-Control-Allow-Credentials", true);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
    res.header("Cache-Control", "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0");
    next();
});
//创建http服务器
const server = require('http').Server(app);

//把socket io依附到对应创建的http服务器上
const io = require('socket.io')(server);

//监听设置，connection表示连接中
io.on('connection', (socket) => {
    //监听info客户的的info频道
    socket.on('info', (data) => {
         //如果收到客户端的信息，就把它设置一个json，data然后返回给客户端，使用emit
        console.log("getmessgae")
        socket.emit('info', {
            data: data
        });
    });})


//启动服务器，端口为9999
server.listen(port, () => {
    console.log('Server listening at port %d', port);
});