socket.io是个基于node.js的快平台实时通讯框架。只用不到10行代码,就可以搭建一个简单的多人实时聊天室。

先来看看运行后的效果:

socket.io多人聊天室

只要简单几步,就可以实现。在这里我们使用本机作为服务端。

安装node.js

由于socket.io使用node.js为服务端,所以必须安装node.jsNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。

编写package.json

新建一个项目文件夹,编写package.json文件来描述项目的信息和依赖关系{  "name": "socket-chat-example",  "version": "0.0.1",  "description": "my first socket.io app",  "dependencies": {}

}

编写index.js -服务端代码//使用express模块快速搭建web服务器var express = require('express');var app = express();var http = require('http').Server(app);//使用socket.io监听事件var io = require('socket.io')(http);//使用express发送css js等静态资源app.use(express.static('public'));//express获得GET请求时将index.html文件返回给浏览器app.get('/',function(req,res){

res.sendFile(__dirname + '/index.html');

});//socket监听连接事件io.on('connection', function(socket){  console.log('一个用户上线了');  //socket监听失去连接的事件

socket.on('disconnect', function(){      console.log('一个用户下线了');

});//当socket监听到了'chat message'事件

socket.on('chat message', function(msg){   //将收到的信息返回给所有客户端

io.emit('chat message',msg);

});

});//服务器监听端口3000http.listen(3000,function(){    console.log('listening on *:3000');

})

cd到当前目录,并在命令行用npm安装express和socket.io

编写index.htmlhtml>

Socket.IO chat

* { margin: 0; padding: 0; box-sizing: border-box; }      body { font: 13px Helvetica, Arial; }      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }      #messages { list-style-type: none; margin: 0; padding: 0; }      #messages li { padding: 5px 10px; }      #messages li:nth-child(odd) { background: #eee; }

Send

var socket = io();

$('form').submit(function(){       //点击发送按钮,提交输入的信息

socket.emit('chat message', $('#m').val());

$('#m').val('');        return false;

});     //接收到chat message时

socket.on('chat message', function(msg){        //将chat message显示在页面

$('#messages').append($('

').text(msg));

});

最后,在命令行中输入node index.js 在浏览器上输入http://localhost:3030  就可以开始多窗口聊天啦!

作者:亲爱的村姑

链接:https://www.jianshu.com/p/5539ccd8d9c4

html网页直播实时聊天,一分钟实现网页多人聊天室【Socket.IO】相关推荐

  1. 使用nginx搭建流媒体直播平台(该方式不适用与多人聊天)

    一 概要说明 使用nginx搭建流媒体直播平台,目的就是要支持rtmp协议,实现用户使用rtmp(rtmp://192.168.201.128/myapp)协议推送流到服务器.然后其他用户点播该用户推 ...

  2. 双人聊天php,做一个模拟两人聊天界面遇到困难

    问题描述 现在有三个问题: 第一:我无法让头像图片跟随说的话一起发送出去,我试过直接放入img.src但是并不行. 第二:我没有办法做到让两个模拟的对话一人一句分的清清楚楚,因为我这个发送出去的 是改 ...

  3. 视频会议/远程医疗/在线教育网页视频实时音视频通话目前有什么优势和不足?

    很长时间以来,实时通信能力一直是电信类专用设备(如电话.手机)的专有属性.随着各种互联网应用和移动互联网应用的层出不穷,特别是随着用户接入带宽条件的不断改善,许多新的应用都对实时通信服务有着切实的需求 ...

  4. postgres+socket.io+nodejs实时地图应用实践

    2019独角兽企业重金招聘Python工程师标准>>> nodejs一直以异步io著称,其语言特性尤其擅长于在realtime应用中,如聊天室等.在进行实时应用开发时,必不可少的需要 ...

  5. socket多人聊天室c语言,一分钟实现网页多人聊天室【Socket.IO】

    socket.io是个基于node.js的快平台实时通讯框架.只用不到10行代码,就可以搭建一个简单的多人实时聊天室. 先来看看运行后的效果: socket.io多人聊天室 只要简单几步,就可以实现. ...

  6. 即时通讯开发之网页端实时音视频技术WebRTC

    WebRTC,名称源自网页实时通信(Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音通话或视频聊天的技术,是谷歌2010年以6820万美元收购Globa ...

  7. node mongoose_如何使用Express,Mongoose和Socket.io在Node.js中构建实时聊天应用程序

    node mongoose by Arun Mathew Kurian 通过阿伦·马修·库里安(Arun Mathew Kurian) 如何使用Express,Mongoose和Socket.io在N ...

  8. 5分钟快速打造WebRTC视频聊天转

    原文地址: 5分钟快速打造WebRTC视频聊天 百度一下WebRTC,我想也是一堆.本以为用这位朋友( 搭建WebRtc环境 )的SkyRTC-demo 就可以一马平川的实现聊天,结果折腾了半天,文本 ...

  9. 网页多媒体服务器,大区网页直播间搭建,服务器流媒体全对接服务

    大区直播间是近端时间流行的一种直播模式,其作用是多家单位(部门),同用一个流媒体信号源而在不同的子房间引导不同的客户进行沟通的手段.这样做的好处是节约了讲师的精力和网站搭建的费用,降低了直播间的搭建和 ...

  10. Nodejs+socket.io 搭建个人的网页聊天室

    Nodejs+socket.io 搭建个人的网页聊天室 最近看到别人搭建了自己的实时聊天室便产生了兴趣,于是乎自己也着手搭建了一个.在socket这里我选用了socket.io这个模块,在网上看了很多 ...

最新文章

  1. AngularJS中的按需加载ocLazyLoad
  2. C语言中浮点型在计算机中的存储
  3. linux进程--fork详解(三)
  4. 贝叶斯定理与贝叶斯估计
  5. css 深度选择器 ,CSS的coped私有作用域和深度选择器
  6. 清除mysql数据碎片_MySQL 清除表空间碎片方法总结
  7. 报告PPT--Python程序设计,不仅仅是学习编程(35页)
  8. jQuery自己定义绑定的魔法升级版
  9. WPS安装office自定义项安装期间出错
  10. 波峰波谷(凸点凹点)的检测算法
  11. 视频广告播放器(缓存、循环播放)
  12. 5分钟之内,让你轻松掌握面试流程
  13. 亚马逊AWS云服务器 ubuntu系统登陆教程
  14. 扒皮下音悦台的“返回顶部”图标效果
  15. 什么是switch语句?
  16. 高性能浏览器网络(High Performance Browser Networking) 第四章
  17. 江苏工匠杯_unseping_wp
  18. 2021-02-28
  19. 为什么我的同花顺选股服务器列表为空,同花顺选股公式,为什么我就选不出股票来呢数......
  20. 浅析TSINGSEE智能视频分析网关的AI识别技术及应用场景

热门文章

  1. Node.js单例模式
  2. SRE岗位理解(上篇)—读SRE实战手册有感
  3. w7怎么更换计算机用户名和密码怎么办,win7怎么修改系统用户名
  4. # netstat -s
  5. 图片转Excel表格 文字识别 表格识别
  6. kindle 4 简易电子书格式转换(txt转mobi)
  7. 中国天气预报API城市编号
  8. Bypass open_basedir
  9. [FAQ06649] Latin输入法怎么默认勾选几种语言?
  10. 5G网络入门基础--5G网络的架构与基本原理