在节点js中使用套接字连接事件
Posted
技术标签:
【中文标题】在节点js中使用套接字连接事件【英文标题】：Connecting events using socket in node js 【发布时间】：2021-11-02 01:54:52 【问题描述】：对 nodejs 非常陌生，在这里寻求帮助。 我有三个文件 index.html、server.js 和 client.js。 我创建了一个套接字来实时运行我的应用程序，即在用户输入的 id="add" 的 div 标签中显示消息。 用户在 id="element" 的输入字段中输入消息，当单击 id="send_data" 的按钮时应该显示消息。 任何帮助，将不胜感激。 即将用新的js开始我的新旅程。 我在客户端只使用js，根本没有任何框架 每个人甚至所有者都可以看到该消息： 这是我的代码 index.html：
<div class="row">
<div class="col-md-6">
<p><input class="form-control" id="element" type="text" value="Les parties"></p>
</div>
<div class="col-md-6">
<button class="btn btn-primary" id="send_data">Ajouter</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div id="add"></div>
</div>
这里是 server.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.use(express.static(__dirname + '/public'));
app.get('/', (req, res) =>
res.sendFile(__dirname + '/index.html');
);
io.on('connection', (socket) =>
socket.on('message', =>
io.emit('message', "Hello word");
console.log('displaying message')
);
);
server.listen(3000, () =>
console.log('listening on *:3000');
);
最后是client.js
let url = 'http://localhost:3000/';
var socket = io();
var socket = io.connect(url)
let counter = 0;
let add = document.getElementById("add");
let element = document.getElementById("element")
add.addEventListener('click', function(event)
add.innerHTML = element.value;
socket.emit('message', element.value);
)
【问题讨论】：
【参考方案1】：我假设根据您的代码，您需要将 client.js 放在公共文件夹中。我假设你有你的 node_modules、package.json 等等。所以在你的 public/client.js
let url = 'http://localhost:3000/';
var socket = io();
var socket = io.connect(url)
let add = document.getElementById("add");
let btn = document.getElementById('send_data')
btn.addEventListener('click', function(event)
add.innerHTML += `<li>$element.value</li>` ;
socket.emit('message', element.value);
)
socket.on('message', (m) =>
alert("message from the server: "+ m)
)
在您的 server.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.use('/static', express.static('public'))
app.get('/', (req, res) =>
res.sendFile(__dirname + '/index.html');
);
io.on('connection', (socket) =>
console.log("socket connected: ", socket.id)
socket.on('message', (message) =>
// emit message from the server
io.emit('message', "Hello word");
console.log(`message $socket.id: `, message)
);
);
server.listen(3000, () =>
console.log('listening on *:3000');
);
在您的 index.html 中。您必须从客户端导入 socket.js。在这种情况下，您不能从 node_modules 导入它，因为它将在浏览器中运行。您可以在提供之前使用 webpack 或其他捆绑器对其进行捆绑。因为我们没有使用 webpack 来做到这一点。你需要像这样从cdn中获取它
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="row">
<div class="col-md-6">
<p><input class="form-control" id="element" onclick="me" type="text" value="Les parties" /></p>
</div>
<div class="col-md-6">
<button class="btn btn-primary" id="send_data">Ajouter</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div id="add-cont">
<ul id="add"></ul>
</div>
</div>
</body>
</html>
<script src="https://cdn.socket.io/3.1.3/socket.io.min.js" integrity="sha384-cPwlPLvBTa3sKAgddT6krw0cJat7egBga3DJepJyrLl4Q9/5WLra3rrnMcyTyOnh" crossorigin="anonymous"></script>
<script src="./static/client.js"> </script>
【讨论】：
以上是关于在节点js中使用套接字连接事件的主要内容，如果未能解决你的问题，请参考以下文章
如何在socket.io中的断开事件上获取断开连接的客户端的套接字ID
useEffect 中的套接字连接事件在创建组件时不起作用，但在 React 中刷新页面后起作用