socket.io如何即时通信前端配合Node-js教程-PHP中文网

首页

web前端

js教程

socket.io如何即时通信前端配合Node

醉折花枝作酒筹

Apr 23, 2021 am 09:16 AM

nodesocket.io

本篇文章给大家详细介绍一下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(&#39;express&#39;)const app = express()let port =3000app.get(&#39;/&#39;,(req,res,next)=>{
    res.writeHead(200, { &#39;Content-type&#39;: &#39;text/html;charset=utf-8&#39; })
    res.end(&#39;欢迎来到express&#39;)
    next()})const server = app.listen(port,()=>{console.log(&#39;成功启动express服务,端口号是&#39;+port)})

在当前文件所在位置cmd

node serverRoom.js  
//或者使用  快速更新serverRoom.js的变化 同步到当前打开的服务器
//可以通过 npm i nodemon -g 下载到全局 使用很是方便 不亦乐乎
nodemon serverRoom.js

成功启动

在这里插入图片描述
在浏览器看一下

在这里插入图片描述
也是没有问题的。下面我们继续写serverRoom.js

const express = require(&#39;express&#39;)const app = express()let port =3000app.get(&#39;/&#39;,(req,res,next)=>{
    res.writeHead(200, { &#39;Content-type&#39;: &#39;text/html;charset=utf-8&#39; })
    res.end(&#39;欢迎来到express&#39;)
    next()})const server = app.listen(port,()=>{console.log(&#39;成功启动express服务,端口号是&#39;+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(&#39;webEvent&#39;, (res) => {
            window.alert(res)
        })
        //获取input的输入内容//将来传给服务器
        function sendFun() {
            console.log($(&#39;.myBox>.inp&#39;).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(&#39;webEvent&#39;, (res) => {
            window.alert(res)
        })
        mySocket.on(&#39;sendFunEventCallBack&#39;, (res) => {
            console.log(res, &#39;sendFunEventCallBackRes&#39;)
            let data = JSON.parse(res)
            let str = &#39;&#39;
            for (let i = 0; i < data.length; i++) {
                str += `<p>${data[i]}</p>`
            }
            $(&#39;.myBoxChild&#39;)[0].innerHTML = str        })

        //获取input的输入内容//将来传给服务器
        function sendFun() {
            if ($(&#39;.myBox>.inp&#39;).val() != &#39;&#39;) {
                mySocket.emit(&#39;sendFunEvent&#39;, $(&#39;.myBox>.inp&#39;).val())
                $(&#39;.myBox>.inp&#39;)[0].value = &#39;&#39;
            } else {
                alert(&#39;输入字符&#39;)
                return
            }
        }
    </script></body></html>

服务端

const express = require(&#39;express&#39;)const app = express()let port =3000app.get(&#39;/&#39;,(req,res,next)=>{
    res.writeHead(200, { &#39;Content-type&#39;: &#39;text/html;charset=utf-8&#39; })
    res.end(&#39;欢迎来到express&#39;)
    next()})const server = app.listen(port,()=>{console.log(&#39;成功启动express服务,端口号是&#39;+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中文网其他相关文章！

声明

本文转载于：CSDN。如有侵权，请联系admin@php.cn删除

JavaScript在行动中：现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。