<!DOCTYPE html> <html> <head> <title>Node.js Demo</title> </head> <body> <button onclick="addData()" class="addData">按钮一</button> <button onclick="getDataList()" class="DataList">按钮二</button> <div id="result"></div> <script type="text/javascript" src="jquery-3.7.0.js"></script>  <script> $(".addData").click(function () { var oAjax = $.ajax({ url: "http://127.0.0.1:3000/home", type: "post", success: function (data) { alert(data); } }) }) $(".DataList").click(function () { var oAjax = $.ajax({ url: "http://127.0.0.1:3000/home", type: "post", success: function (data) { var resultDiv = document.getElementById("result"); resultDiv.innerHTML = data; alert(data); } }) }) </script> </body> </html>const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); app.post("/addData", (req, res) => { res.send("添加成功"); }); app.post("/dataList", (req, res) => { var arr = []; var zhansan = { name: "张三", age: 19 }; var lisi = { name: "李四", age: 19 }; arr.push(zhansan); arr.push(lisi); res.send(JSON.stringify(arr)); }); const port = 3000; app.listen(port, () => { console.log(`服务器已启动，正在监听端口 ${port}`); }); // //设置一个路由--不使用模块化 // //语法：app.get("/自定义一个名字",callback) // //语法：app.post("/自定义一个名字",callback) app.post("/home",(req,res)=>{ // // req 请求---向服务器请求资源 // // res 响应--给前端发送数据 res.send("home页面") })没实现点击按钮

时间: 2024-04-24 17:21:15 浏览: 187

socket.io认证，nodejs实现socket.io demo（server/client）

Socket.IO 是一个实时应用框架，它为Web开发者提供了一种简单、高效的通信方式，支持WebSocket以及其他多种降级机制。在Node.js环境中，Socket.IO能够帮助我们构建实时、双向且连接持久的应用，比如在线聊天、实时游戏或者协作工具等。本教程将通过一个简单的示例介绍如何使用Node.js实现Socket.IO服务端和客户端。 ### 1. 安装Socket.IO 确保你已经安装了Node.js环境。然后，通过npm（Node.js包管理器）来安装Socket.IO库： ```bash npm install socket.io ``` ### 2. 创建服务器创建一个名为`server.js`的文件，导入`http`模块和`socket.io`库，并初始化一个HTTP服务器和Socket.IO服务器： ```javascript const http = require('http'); const io = require('socket.io'); const server = http.createServer(); const socketServer = io(server); server.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` ### 3. 实现服务器端事件监听在服务器端，我们可以监听`connection`事件，当有新的客户端连接时触发。同时，可以添加自定义事件处理函数，例如发送消息： ```javascript socketServer.on('connection', (socket) => { console.log('A client connected'); socket.on('chat message', (msg) => { console.log(`Received message: ${msg}`); socket.broadcast.emit('chat message', msg); }); socket.on('disconnect', () => { console.log('A client disconnected'); }); }); ``` 上述代码中，`socket.broadcast.emit`会向除当前连接之外的所有客户端发送消息。 ### 4. 创建客户端创建一个名为`client.html`的HTML文件，引入`socket.io-client`库，创建WebSocket连接，并实现发送和接收消息的功能： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Socket.IO Client</title> <script src="https://cdn.socket.io/4.1.2/socket.io.min.js"></script> <style> #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } #input { width: 100%; box-sizing: border-box; } </style> </head> <body> <ul id="messages"></ul> <form action=""> <input id="input" autocomplete="off" /><button>Send</button> </form> <script> const socket = io('http://localhost:3000'); const form = document.getElementsByTagName('form')[0]; const input = document.getElementById('input'); const messages = document.getElementById('messages'); form.addEventListener('submit', (e) => { e.preventDefault(); if (input.value) { socket.emit('chat message', input.value); input.value = ''; } }); socket.on('chat message', (msg) => { const li = document.createElement('li'); li.textContent = msg; messages.appendChild(li); }); </script> </body> </html> ``` ### 5. 运行并测试在命令行中，先启动服务器： ```bash node server.js ``` 然后在浏览器中打开`client.html`文件，你可以在多个浏览器窗口或设备上打开这个页面，尝试发送消息，它们将会实时地在所有连接的客户端之间传递。通过这个简单的示例，你已经掌握了使用Node.js和Socket.IO创建实时双向通信的基本步骤。在实际项目中，你可以根据需求扩展功能，如加入用户认证、房间系统、数据序列化等。Socket.IO的强大之处在于它能轻松应对各种网络环境，确保数据的可靠传输，是开发实时应用的理想选择。

你在代码中存在一个问题，就是你的按钮点击事件绑定的是`addData()`和`getDataList()`函数，但是你的JavaScript代码中没有定义这两个函数。另外，你的接口路径应该是`/addData`和`/dataList`，而不是`/home`。你可以尝试使用以下代码，它修复了上述问题： ```html <!DOCTYPE html> <html> <head> <title>Node.js Demo</title> <script src="jquery-3.7.0.js"></script> </head> <body> <button onclick="addData()" class="addData">按钮一</button> <button onclick="getDataList()" class="DataList">按钮二</button> <div id="result"></div> <script> function addData() { $.post("/addData", function(data) { alert(data); }); } function getDataList() { $.post("/dataList", function(data) { var resultDiv = document.getElementById("result"); resultDiv.innerHTML = data; alert(data); }); } </script> </body> </html> ``` 另外，确保你在项目根目录下有一个名为`jquery-3.7.0.js`的文件，它将被用于引入jQuery库。如果没有该文件，可以从jQuery官网下载并保存到项目根目录下。然后，确保你的Node.js服务器代码与之前提供的代码一致。现在，当你在浏览器中访问页面并点击按钮时，应该能够正常调用接口并弹出相应的结果，或者将结果填充到页面中的`<div>`元素中。

阅读全文

相关推荐

node.js渲染ejs文件_小商品管理demo

node+express+ejs使用模版引擎做的一个示例demo

在ae中调用opencv.jsnode处理图片

《D3.js数据可视化实战手册》—— 1.2 搭建一个简易的D3开发环境

根据nodejs写一个登录注册结合MySQL然后登录成功后展示在HTML table 页面上

可以写个简单的node+mysql+html交互吗

写一个demo ，使用nodejs搭建一个服务，再写一个html，用JS的websocket和服务链接

在页面中如何使用CKeditor并将其提交至node服务器解析

sigmajs 性能demo

html5点击左侧如侧进行变化,使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果...

html、js、css写一个广度优先搜索算法演示

前后端传递数据demo

jssip完整demo

vite从0开始搭建vue3开发环境

h5实现网络拓扑图demo

通过umd怎么导入gg-editor

pycharm专业版如何使用echart进行可视化

如何使用nodejs实现网页全屏并在扩展屏显示

最新推荐

教师节主题班会.pptx

学生网络安全教育主题班会.pptx

世界环境日主题班会.pptx

正整数数组验证库：确保值符合正整数规则

管理建模和仿真的文件

【损失函数与随机梯度下降】：探索学习率对损失函数的影响，实现高效模型训练

在ADS软件中，如何选择并优化低噪声放大器的直流工作点以实现最佳性能？

系统移植工具集：镜像、工具链及其他必备软件包

"互动学习：行动中的多样性与论文攻读经历"

【损失函数与批量梯度下降】：分析批量大小对损失函数影响，优化模型学习路径