我读过博客和看过视频，在这些博客和视频中，服务器和客户机之间的连接是成功的，但由于某种原因，它似乎在我的系统上并不起作用。
这是服务器端的代码:
const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
const PORT = 3001;
io.on('connection', socket => {
console.log('a user connected.');
});
http.listen(PORT, () => {
console.log('listening on port ' + PORT);
});
这是客户端的代码:
import React, { useEffect } from 'react';
import io from 'socket.io-client';
const socket = io('http://127.0.0.1:3001');
function Test() {
return (
<div>
Test
</div>
)
}
export default Test;
谢谢你所有的帮助！
您可以尝试将套接字包装在
import React, { useState, useEffect } from "react";
import socketIOClient from "socket.io-client";
const ENDPOINT = "http://127.0.0.1:3001";
function App() {
const [response, setResponse] = useState("");
useEffect(() => {
const socket = socketIOClient(ENDPOINT);
socket.on("FromAPI", data => {
setResponse(data);
});
}, []);
return (
<p>
{response}
</p>
);
}
export default App;
在服务器中，您需要指定要发出的事件:
socket.emit("FromAPI", "Hello Socket!");
请在服务器端使用ws模块:
服务器端。。。
const WebSocketServer = require("ws").Server,
express = require("express"),
http = require("http"),
app = express(),
server = http.createServer(app);
const bodyParser = require("body-parser");
const cors = require('cors')
require('dotenv').config();
const port = process.env.PORT || 5000;
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
require("./app/routes/routes.js")(app);
// set port, listen for requests
server.listen(port, () => {
console.log(`Server is running on port ${port}.`);
});
var wss = new WebSocketServer({server: server, path: '/getall'});
const sql = require("./app/models/db.js");
wss.on("connection", function(ws){
ws.on('message', function incoming(message) {
if (message) {
ws.send(JSON.stringify(message));
} else {
ws.send("{}");
}
});
});
客户端。。。
<script>
var wsurl = "ws://localhost:5000";
var Socket = new WebSocket(wsurl + "/getall");
Socket.onopen = function() {
Socket.send("get all tags");
};
Socket.onmessage = function (evt) {
var received_msg = evt.data;
// console.log(received_msg);
var tags = JSON.parse(received_msg);
self.tags = tags;
};
</script>
客户端不需要任何节点模块。新的WebSocket(path)原本可以不在浏览器上使用任何模块。
