javascript - 反应客户端套接字未与服务器套接字连接
问题描述
所以我是socket-io的新手并做出反应,我使用express作为后端。我使用的 socket.io-client 版本是 3.0.3。并且我在后端使用的socket-io包的版本也是3.0.3,服务器连接到通过原始html套接字给出的其他请求,但它没有与react socket.io-client连接。
客户端:
import './App.css';
import {MainComponent} from "./Components/MainComponent"
import {BrowserRouter as Router} from "react-router-dom";
import openSocket from "socket.io-client";
const socket = openSocket("http://localhost:5000");
function App() {
socket.on("chat", message => {
console.log(message);
});
return (
<div className="App">
<Router>
<MainComponent></MainComponent>
</Router>
</div>
);
}
export default App;
服务器端:
const express = require("express");
const app = express();
const http = require("http").createServer(app);
const io = require("socket.io")(http);
const bodyParser = require("body-parser");
const cors = require("cors");
const mongoose = require("mongoose");
const Chats = require("./model")
mongoose.connect("mongodb://localhost/chats",{useNewUrlParser:true});
const db = mongoose.connection;
io.on("connection",(socket)=>{
console.log("user has connected")
io.emit("chat","hellow world");
socket.on("join-room",(room)=>{
Chats.find({},(err,data)=>{
if(err) throw err;
socket.emit("load-messages",data)
})
})
socket.on("message",(data)=>{
socket.join(data.room);
io.to(data.room).emit("serverMessage",{message:data.message,user:data.user})
const newChat = new Chats({message:data.message,user:data.user,room:data.room})
newChat.save();
})
})
app.use(cors())
app.use(bodyParser.json());
app.use(express.static("public"))
app.get("/",(req,res)=>{
res.sendFile("index.html")
})
app.get("/chats",(req,res)=>{
Chats.find({},(err,data)=>{
if(err) throw err;
res.json(data)
})
})
http.listen(5000,()=>{
console.log("the server is up and running in the port 5000")
})
解决方案
将客户端的第 5 行更改为以下内容:
const socket = openSocket("http://localhost:5000", {transports: ['websocket']});
在服务器端更改以下行
io.emit("chat","hellow world");
对此
socket.emit("chat","hellow world");
推荐阅读
- angular - 在数组打字稿中检查相同的 courseID
- typo3 - TYPO3 v10.1.0 无法安装
- php - 在 PHP 中使用函数输出 HTML
- angular - 在 Angular 中从 Froala 2.9 升级到 3.0.x 后损坏
- c++ - 按钮中带有标签的 GTK 3 C++ 图标
- vue.js - nativescript axios - 我在哪里可以在调试模式下看到我的 XHR 请求
- python - python每周导入csv
- neo4j - Neo4j:查询以查找具有最多关系的节点
- javascript - 如何允许用户更改他们的游戏密钥?
- ios - SwiftUI:将视图与其父级的中心对齐