新手使用react+nodejs+socket.io初始化通信连接

这个一个非常哈

已于 2023-02-28 17:55:42 修改

阅读量401

点赞数 1

CC 4.0 BY-SA版权

文章标签： react node.js websocket

于 2023-02-28 11:39:41 首次发布

本文链接：https://blog.youkuaiyun.com/ae_pppppp/article/details/129258418

最近接触到socket.io，想玩一下这东西怎么使用，但是在初始化的时候，总是连接失败，弄了好久，终于找到办法了

nodejs搭建一个服务器（可采用socket.io官网的案例来搭建）

1.1 新建一个文件夹react-app-server

初始化项目  npm init -y
新建index.js文件
安装包 npm i express nodemon socket.io

安装完如下图

注意：端口号这里我使用3000，服务启动成功后运行到浏览器 http://localhost:3000

//index.js
const express = require("express");

const app = express();

const http = require("http");

const server = http.createServer(app);

const { Server } = require("socket.io");

const io = new Server(server});

app.get("/", (req, res) => {
  res.send("<h1>Hello world</h1>");
});

io.on("connection", (socket) => {
  console.log("a user connected");
  socket.on("disconnect", () => {
    console.log("user disconnected");
  });
});

server.listen(3000, () => {
  console.log("listening on *:3000");
});

1.2 在package.json文件中加入 "start": "nodemon index.js"；运行命令 npm start

出现 “listening on *:3000”就是启动成功

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon index.js"   //这句话
  },

新建一个react项目，react页面App.jsx中引入socket.io-client

注意：url是启动node成功后的服务地址

import io from "socket.io-client";
const url="http://localhost:3000/#/"
const socket = io(url);

刷新页面会发现控制台报跨域错误，添加cors跨域处理就行

//修改index.js 文件

const io = new Server(server, {
  cors: {
    origin: "*"
  }
});

4.在页面刷新的时候，就可以在服务处打印 “a user connected” 表示连接成功