socket.io如何即时通信前端配合Node
本篇文章给大家详细介绍一下socket.io即时通信前端配合Node的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
首先看效果，哈哈哈 还是那么的小
首先我们需要
新建文件夹
并快速生成一个package.json文件
npm init -y //生成一个package.json
npm i express npm i socket.io
新建一个serverRoom.js文件
const express = require('express')const app = express()let port =3000app.get('/',(req,res,next)=>{
res.writeHead(200, { 'Content-type': 'text/html;charset=utf-8' })
res.end('欢迎来到express')
next()})const server = app.listen(port,()=>{console.log('成功启动express服务,端口号是'+port)})在当前文件所在位置cmd
node serverRoom.js //或者使用 快速更新serverRoom.js的变化 同步到当前打开的服务器 //可以通过 npm i nodemon -g 下载到全局 使用很是方便 不亦乐乎 nodemon serverRoom.js
成功启动
在浏览器看一下
也是没有问题的。下面我们继续写serverRoom.js
const express = require('express')const app = express()let port =3000app.get('/',(req,res,next)=>{
res.writeHead(200, { 'Content-type': 'text/html;charset=utf-8' })
res.end('欢迎来到express')
next()})const server = app.listen(port,()=>{console.log('成功启动express服务,端口号是'+port)})//引入socket.io传入服务器对象 让socket.io注入到web网页服务const io = require('socket.io')(server);io.on('connect',(websocketObj)=>{ //connect 固定的
//链接成功后立即触发webEvent事件
websocketObj.emit('webEvent','恭喜链接websocket服务成功：目前链接的地址为：http://127.0.0.1:3000')})前端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">
<!-- 通过script的方式引入 soctke.io -->
<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
<!-- 为了操作dom方便我也引入了jq -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<title>myWebsocket</title></head><body>
<p class="myBox">
<input class="inp" type="text"> <button onclick="sendFun()">点我</button>
</p>
<script>
//页面打开自动链接 http://localhost:3000 后端服务
let mySocket = io("http://localhost:3000") //直接写后端服务地址
//一直在监听webEvent 这个事件
mySocket.on('webEvent', (res) => {
window.alert(res)
})
//获取input的输入内容//将来传给服务器
function sendFun() {
console.log($('.myBox>.inp').val())
}
</script></body></html>当服务启动的时候，前端页面打开会自动链接我们后端服务，链接成功触发 webEvent 事件（名称可以自己定义，前后得统一），前端监听webEvent事件 获取服务器传送过来的内容并通过alert进行了显示。
好的，上面没问题下面就也很好理解：
下面要实现的功能是在input输入框中输入东西，传入服务器，服务器返回数组，前端显示在页面
//当然只是为了学习功能，就不要在乎例子了
看前端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">
<!-- 通过script的方式引入 soctke.io -->
<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
<!-- 为了操作dom方便我也引入了jq -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<title>myWebsocket</title></head><body>
<p class="myBox">
<input class="inp" type="text"> <button onclick="sendFun()">点我</button>
<p class="myBoxChild"></p>
</p>
<script>
//页面打开自动链接 http://localhost:3000 后端服务
let mySocket = io("http://localhost:3000") //直接写后端服务地址
//一直在监听webEvent 这个事件
mySocket.on('webEvent', (res) => {
window.alert(res)
})
mySocket.on('sendFunEventCallBack', (res) => {
console.log(res, 'sendFunEventCallBackRes')
let data = JSON.parse(res)
let str = ''
for (let i = 0; i < data.length; i++) {
str += `<p>${data[i]}</p>`
}
$('.myBoxChild')[0].innerHTML = str })
//获取input的输入内容//将来传给服务器
function sendFun() {
if ($('.myBox>.inp').val() != '') {
mySocket.emit('sendFunEvent', $('.myBox>.inp').val())
$('.myBox>.inp')[0].value = ''
} else {
alert('输入字符')
return
}
}
</script></body></html>服务端
const express = require('express')const app = express()let port =3000app.get('/',(req,res,next)=>{
res.writeHead(200, { 'Content-type': 'text/html;charset=utf-8' })
res.end('欢迎来到express')
next()})const server = app.listen(port,()=>{console.log('成功启动express服务,端口号是'+port)})//引入socket.io传入服务器对象 让socket.io注入到web网页服务const io = require('socket.io')(server);let arr=['恭喜链接websocket服务成功：目前链接的地址为：http://127.0.0.1:3000']io.on('connect',(websocketObj)=>{ //connect 固定的
//链接成功后立即触发webEvent事件
websocketObj.emit('webEvent',JSON.stringify(arr));
//监听前端触发的 sendFunEvent 事件
websocketObj.on('sendFunEvent',(webres)=>{
arr.push(webres)
//触发所以的 sendFunEventCallBack 事件 让前端监听
io.sockets.emit("sendFunEventCallBack", JSON.stringify(arr));
})})在打开页面后，在input输入值，点击按钮触发sendFun函数，触发自定义事件 sendFunEvent并将input的value传送到服务器，服务器监听sendFunEvent事件，将数据push到数组中，又触发了sendFunEventCallBack事件，将数组JSON字符串化传到前端，前端监听sendFunEventCallBack事件，获取数组，JSON序列化，将数据循环到页面上，这是整个流程。
打开多个前端页面可以进行实时更新，可以进行聊天。
【推荐学习：javascript高级教程】
以上是socket.io如何即时通信前端配合Node的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
nvm 怎么删除node
Dec 29, 2022 am 10:07 AM
nvm删除node的方法：1、下载“nvm-setup.zip”并将其安装在C盘；2、配置环境变量，并通过“nvm -v”命令查看版本号；3、使用“nvm install”命令安装node；4、通过“nvm uninstall”命令删除已安装的node即可。
node项目中如何使用express来处理文件的上传
Mar 28, 2023 pm 07:28 PM
怎么处理文件上传？下面本篇文章给大家介绍一下node项目中如何使用express来处理文件的上传，希望对大家有所帮助！
Node服务怎么进行Docker镜像化？极致优化详解
Oct 19, 2022 pm 07:38 PM
这段时间在开发一个腾讯文档全品类通用的 HTML 动态服务，为了方便各品类接入的生成与部署，也顺应上云的趋势，考虑使用 Docker 的方式来固定服务内容，统一进行制品版本的管理。本篇文章就将我在服务 Docker 化的过程中积累起来的优化经验分享出来，供大家参考。
深入浅析Node的进程管理工具“pm2”
Apr 03, 2023 pm 06:02 PM
本篇文章给大家分享Node的进程管理工具“pm2”，聊聊为什么需要pm2、安装和使用pm2的方法，希望对大家有所帮助！
Pi Node教学：什么是Pi节点？如何安装和设定Pi Node？
Mar 05, 2025 pm 05:57 PM
PiNetwork节点详解及安装指南本文将详细介绍PiNetwork生态系统中的关键角色——Pi节点，并提供安装和配置的完整步骤。Pi节点在PiNetwork区块链测试网推出后，成为众多先锋积极参与测试的重要环节，为即将到来的主网发布做准备。如果您还不了解PiNetwork，请参考Pi币是什么？上市价格多少？Pi用途、挖矿及安全性分析。什么是PiNetwork？PiNetwork项目始于2019年，拥有其专属加密货币Pi币。该项目旨在创建一个人人可参与
聊聊用pkg将Node.js项目打包为可执行文件的方法
Dec 02, 2022 pm 09:06 PM
如何用pkg打包nodejs可执行文件？下面本篇文章给大家介绍一下使用pkg将Node项目打包为可执行文件的方法，希望对大家有所帮助！
npm node gyp失败怎么办
Dec 29, 2022 pm 02:42 PM
npm node gyp失败是因为“node-gyp.js”跟“Node.js”版本不匹配，其解决办法：1、通过“npm cache clean -f”清除node缓存；2、通过“npm install -g n”安装n模块；3、通过“n v12.21.0”命令安装“node v12.21.0”版本即可。
使用Angular和Node进行基于令牌的身份验证
Sep 01, 2023 pm 02:01 PM
身份验证是任何Web应用程序中最重要的部分之一。本教程讨论基于令牌的身份验证系统以及它们与传统登录系统的区别。在本教程结束时，您将看到一个用Angular和Node.js编写的完整工作演示。传统身份验证系统在继续基于令牌的身份验证系统之前，让我们先看一下传统的身份验证系统。用户在登录表单中提供用户名和密码，然后点击登录。发出请求后，通过查询数据库在后端验证用户。如果请求有效，则使用从数据库中获取的用户信息创建会话，然后在响应头中返回会话信息，以便将会话ID存储在浏览器中。提供用于访问应用程序中受
