热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Nodejs+Socket.io实现通讯实例代码

目录结构D:.│package.json│server.js│└─publicindex.htmlsocket.io.js需要的条件socket.io.js供前端界面初始化iosock

目录结构

D:.
 │ package.json
 │ server.js
 │
 └─public
 index.html
 socket.io.js

需要的条件

  • socket.io.js 供前端界面初始化io
  • socket.io 供NodeJs端提供socket方法

socket.io.js存在于socket.io-client

socket.io存在于socket.io

演示的功能

  • 客户端发送消息给服务端
  • 后端触发事件告知客户端
  • 客户端离开触发服务端事件

服务端

server.js

var express = require('express'); 
var app = express();

var server = require('http').createServer(app);
var io = require('socket.io')(server);

app.use('/', express.static(__dirname + '/public')); 

server.listen(80);

//socket部分
io.on('connection', function(socket) {
  //接收并处理客户端的hi事件
  socket.on('hi', function(data) {
    console.log(data);

    //触发客户端事件c_hi
    socket.emit('c_hi','hello too!')
  })

  //断开事件
  socket.on('disconnect', function(data) {
    console.log('断开',data)
    socket.emit('c_leave','离开');
    //socket.broadcast用于向整个网络广播(除自己之外)
    //socket.broadcast.emit('c_leave','某某人离开了')
  })

});

  • connection用来处理socket链接事件
  • disconnect处理连接断开事件
  • 后端接受前端事件通过socket.on(EventName,function(date){})
  • 后端触发前端事件通过socket.emit(EventName,msg)

这个后端演示了,前端发送消息给后端,触发hi事件,hi事件通过回调在触发客户端定义的c_hi事件告知前端。

客户端

index.html





  















  • 发送消息按钮用来给服务端发送信息,触发服务端定义的hi事件。
  • 离开页面按钮用来离开页面,也就是socket会自动断开。触发服务端定义的disconnect。

源码下载:Socket_jb51.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 我正在使用 Ruby on Rails 构建个人网站。总体而言,RoR 是一个非常出色的工具,它提供了丰富的功能和灵活性,使得创建自定义页面变得既高效又便捷。通过利用其强大的框架和模块化设计,我可以轻松实现复杂的功能,同时保持代码的整洁和可维护性。此外,Rails 的社区支持也非常强大,为开发过程中遇到的问题提供了丰富的资源和解决方案。 ... [详细]
  • 深入解析:JavaScript中的表达式与语句有何不同
    深入解析:JavaScript中的表达式与语句有何不同 ... [详细]
  • 【前端开发】深入探讨 RequireJS 与性能优化策略
    随着前端技术的迅速发展,RequireJS虽然不再像以往那样吸引关注,但其在模块化加载方面的优势仍然值得深入探讨。本文将详细介绍RequireJS的基本概念及其作为模块加载工具的核心功能,并重点分析其性能优化策略,帮助开发者更好地理解和应用这一工具,提升前端项目的加载速度和整体性能。 ... [详细]
  • 在处理大规模并发请求时,传统的多线程或多进程模型往往无法有效解决性能瓶颈问题。尽管它们在处理小规模任务时能提升效率,但在高并发场景下,系统资源的过度消耗和上下文切换的开销会显著降低整体性能。相比之下,Python 的 `asyncio` 模块通过协程提供了一种轻量级且高效的并发解决方案。本文将深入解析 `asyncio` 模块的原理及其在实际应用中的优化技巧,帮助开发者更好地利用协程技术提升程序性能。 ... [详细]
  • MongoDB Aggregates.group() 方法详解与编程实例 ... [详细]
  • 期末Web开发综合实践项目:运用前端技术打造趣味小游戏体验
    期末Web开发综合实践项目中,学生通过运用HTML、CSS和JavaScript等前端技术,设计并实现了一款趣味性十足的小游戏。该项目不仅检验了学生对前端基础知识的掌握情况,还提升了他们的实际操作能力和创意设计水平。视频链接展示了项目的最终成果,直观呈现了游戏的互动性和视觉效果。 ... [详细]
  • JavaScript最初并非设计为纯粹的面向对象编程(OOP)语言,因为直到ES5标准中仍未引入类的概念。然而,随着ES6的发布,JavaScript正式引入了类的语法,使得开发者能够更加直观地实现继承机制。本文将深入探讨JavaScript中多样的继承实现方法,包括原型链、寄生组合式继承等技术,并分析它们的优缺点及适用场景。 ... [详细]
  • 本文探讨了在Lumen框架中实现自定义表单验证功能的方法与挑战。Lumen的表单验证机制默认返回无状态的JSON格式API响应,这给初学者带来了一定的难度。通过深入研究Validate类,作者分享了如何有效配置和使用自定义验证规则,以提升表单数据的准确性和安全性。 ... [详细]
  • 在 VSCode 中高效进行代码调试的关键在于正确配置 Node.js 环境。首先,需要设置 `launch.json` 文件中的 `program` 属性为项目的启动路径。通常情况下,这会指向 `package.json` 文件中的 `start` 脚本。通过这种方式,可以在启动调试时自动添加断点,从而更方便地进行代码调试。此外,合理利用 VSCode 的调试工具和功能,如条件断点、日志点和变量监视,可以进一步提升调试效率。 ... [详细]
  • MVVM架构~mvc,mvp,mvvm大话开篇
    返回目录百度百科的定义:MVP是从经典的模式MVC演变而来,它们的基本思想有相通的地方:ControllerPresenter负责逻辑的处理,Model提供数据,View负责显示。作为一种新的模 ... [详细]
  • 在C#和ASP.NET开发中,TypeParse 是一个非常实用的类型解析扩展方法库,提供了简便的类型转换功能。例如,通过 `var int1 = "12".TryToInt();` 可以将字符串安全地转换为整数,如果转换失败则返回0。此外,还支持更多复杂的类型转换场景,如 `var int2 = "22x".TryToInt();` 和 `var int3 = "3.14".TryToInt();`,确保了代码的健壮性和易用性。 ... [详细]
  • Python 数据分析领域不仅拥有高质量的开发环境,还提供了众多功能强大的第三方库。本文将介绍六个关键步骤,帮助读者掌握 Python 数据分析的核心技能,并深入探讨六款虽不广为人知但却极具潜力的数据处理库,如 Pandas 的替代品和新兴的可视化工具,助力数据科学家和分析师提升工作效率。 ... [详细]
  • 根据不同环境需求,利用 Vue CLI 的 `npm run build` 命令对项目进行定制化打包,如测试、预发布和生产环境。通过配置 `process.env` 变量,实现不同环境下接口和服务的动态切换,确保应用在各阶段都能高效运行和调试。 ... [详细]
  • 本课程详细解析了Spring AOP的核心概念及其增强机制,涵盖前置增强、后置增强和环绕增强等类型。通过具体示例,深入探讨了如何在实际开发中有效运用这些增强技术,以提升代码的模块化和可维护性。此外,还介绍了Spring AOP在异常处理和性能监控等场景中的应用,帮助开发者更好地理解和掌握这一强大工具。 ... [详细]
  • 掌握DSP必备的56个核心问题,我已经将其收藏以备不时之需! ... [详细]
author-avatar
情之瞬
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有