Socket.IO聊天室~简单实用
小编心语:大家过完圣诞准备迎元旦吧~小编在这里预祝大家元旦快乐!!这一次要分享的东西小编也不是很懂啊,总之小编把它拿出来是觉地比较稀奇,而且程序也没有那么难,是一个比较简单的程序,大家可以多多试试~
简介:Socket.IO实现了实时双向的基于事件的通讯机制。旨在让各种浏览器与移动设备上实现实时app功能,模糊化各种传输机制。
下面我们使用Node.js和Socket.IO来做一个简单的聊天室。
一、初始化项目
(这个是在实验楼网站的虚拟平台需要实现的~可自动略过这一环节,不需要也可以的哈)
打开虚拟机终端,新建一个文件夹socketio,进入此文件夹使用npm初始化项目:
$ npm init
然后输入项目相关信息,也可以不输入,直接一路回车,完成后会在此目录下生产一个package.json文件。这个文件用于描述项目相关信息,以及声明项目中所使用的模块。
然后安装Socket.IO:
$ npm install socket.io --save
安装Socket.IO的时候,--save参数用于保存模块依赖信息到package.json文件,安装完后,打开package.json文件会看到里面多了一项内容:
"dependencies": {"socket.io": "^1.2.1"
}
同时Socket.IO安装在了node_modules文件夹下。
二、创建http server
安装Socket.IO模块,我们现在先来创建一个可访问的页面吧。
在文件夹socketio中新建index.js文件,这就是在服务端运行的主文件。
首先在index.js中添加如下代码,引入所需的模块:
var http = require('http'); // http 模块,用于创建http server
var socketio = require('socket.io'); // socket.io 模块
var fs = require('fs'); // fs 模块,用于读取文件
然后通过http模块创建app,在index.js文件中添加代码:
// http.createServer()方法用于创建http server // 以处理来自浏览器的请求 var app = http.createServer(function(req, res) {// fs.readFile()方法用于读取文件// 此处读取的是index.html文件// 也就是我们后面要编写的HTML页面文件fs.readFile(__dirname + '/index.html', function (err, data) {if (err) {res.writeHead(500);return res.end('Error loading index.html');}res.writeHead(200); // 返回请求状态码res.write(data); // 返回读取到的内容给浏览器res.end();}); }).listen(8080); // listen()方法用监听http server到指定的地址和端口,默认地址是localhost
在文件夹socketio中新建index.html文件,代码如下:
<!doctype html>
<html><head><meta charset="utf-8"><title>Socket.IO chat</title></head><body>Hello, shiyanlou.</body>
</html>
运行程序:
$ node index.js
然后打开虚拟机中的浏览器,访问“127.0.0.1:8080”浏览器页面中出现“Hello, shiyanlou.”,说明创建的http server成功了。
三、实现聊天
下面我们就来创建Socket.IO对象吧:
// 在与app相同的地址和端口上创建Socket.IO服务
var io = socketio(app);// 监听connection事件
// 当浏览器连接到此Socket.IO服务时触发该事件
io.on('connection', function (socket) {// 监听浏览器端的chat事件socket.on('chat', function (data) {console.log(data);});
});
这里在服务器端监听了来自浏览器的chat事件,后面我们会在index.html中实现此事件。
先来实现一个简单聊天界面吧,修改index.html文件中的代码如下所示:
<!doctype html>
<html><head><meta charset="utf-8"><title>Socket.IO chat</title><style>* { 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; }</style><!-- 引入socket.io库和jQuery库 --><script src="https://cdn.socket.io/socket.io-1.2.1.js"></script><script src="http://code.jquery.com/jquery-1.11.1.js"></script></head><body><!-- 显示消息记录 --><ul id="messages"></ul><!-- 消息发送框 --><div id="form"><input id="m" autocomplete="off" /><button id="send">Send</button></div></body>
</html>
然后在浏览器端创建chat事件,在index.html文件中添加如下JavaScript代码:
<script>
// 连接到Socket.IO服务器
var socket = io.connect();$(function() {// 绑定发按钮发送消息的事件$('#send').on('click', function() {var data = $('#m').val();// 创建chat事件并发送消息给服务器// emit('event') 表示发送了一个event命令// 使用io.on('event')接收对应事件的信息// 所以客户端服务器端需要使用socket.on('chat')接收聊天信息socket.emit('chat', { msg: data });$('#m').val('');});
});
</script>
现在运行项目:
$ node index.js
使用虚拟机中的浏览器访问“127.0.0.1:8080”,通过聊天框发送消息,会看到服务器端会打印出相应消息内容。
下面我们来实现把用户发送的消息发送给所有客户端,在index.js文件中创建sendmsg事件:
io.on('connection', function (socket) {socket.on('chat', function (data) {console.log(data);// 创建sendmsg事件并把发送聊天消息给客户端io.emit('sendmsg', data);});
});
客户端接收并显示消息,在index.html
中添加JavaScript代码:
$(function() {// ...// 接收消息并显示到消息记录框中socket.on('sendmsg', function(msg) {$('#messages').append($('<li>').text(msg.msg));});
});
再重新运行项目:
$ node index.js
现在用浏览器打开多个页面,就能看到别人发送的消息了,这样一个简单的实时聊天室就实现了。
当然,你可以自己扩展这个项目,做一个功能更加完整的聊天室。
此项目主要用到了Socket.IO的emit()方法和on()方法,emit()方法用于创建和触发事件,on()方法用于监听事件。
更多详细步骤及内容请登录http://www.shiyanlou.com/courses/?course_type=project&tag=all
有更多基础课、项目课欢迎大家登陆实验楼官方网站http://www.shiyanlou.com。
现在登陆实验楼更有感恩好礼相送http://www.shiyanlou.com/huodong/thanks.html
Socket.IO聊天室~简单实用相关推荐
- nodejs socket.io 聊天室
阅读目录 需求分析 Node.js Socket.IO 安装Node.js 搭建WebSocket服务端 服务端代码实现 客户端代码实现 Web领域的实时推送技术,也被称作Realtime技术.这种技 ...
- Socket.io 聊天室(代码已开源)
1.启发 1.1 最近得闲有空玩一下Socket.io跟RabbitMQ所以造个小项目自己玩玩. 1.2 当然不是正式项目,个人复习 测试所用.设计部分有的地方也不太合理,UI也是随便弄的. 1. ...
- 利用socket.io+nodejs打造简单聊天室
代码地址如下: http://www.demodashi.com/demo/11579.html 界面展示: 首先展示demo的结果界面,只是简单消息的发送和接收,包括发送文字和发送图片. ws说明: ...
- 使用socket.io做一个简单的WEB聊天室
使用socket.io做一个简单的WEB聊天室(可消息私发) 1. 创建一个空的工程目录 空的目录命名为chat-web 2. 创建package.json 使用命令:npm init,会引导你设置p ...
- Android 基于Socket的聊天室
原文地址为: Android 基于Socket的聊天室 Socket是TCP/IP协议上的一种通信,在通信的两端各建立一个Socket,从而在通信的两端之间形成网络虚拟链路.一旦建立了虚拟的网络链路, ...
- 【java毕业设计】基于java+原生Sevlet+socket的聊天室系统设计与实现(毕业论文+程序源码)——聊天室系统
基于java+原生Sevlet+socket的聊天室系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+原生Sevlet+socket的聊天室系统设计与实现,文章末尾附有本毕业设 ...
- 基于socket的聊天室实现原理
基于socket的聊天室,目前还比较少见,国内比较知名的有网易和碧海银沙聊天室.这种聊天室的特点很明显,不象CGI聊天室那样不管有没有人发言,都会定时刷新.而是当有人发言时,屏幕上才会出现新聊天内容, ...
- 【python】基于Socket的聊天室Python开发
基于Socket的聊天室Python开发 一.Socket简述 二.创建服务端Server 2.1 创建服务端初始化 2.2 监听客户端连接 2.3 处理客户端消息 三.创建客户端Client 3.1 ...
- 使用Socket模拟聊天室
使用Socket模拟聊天室 文章目录 使用Socket模拟聊天室 客户端 客户端读线程 客户端写线程 客户主函数 服务端 服务端线程 服务端主函数 客户端 客户端读线程 public class Ec ...
最新文章
- 自己录制的Oracle 相关视频(陆续更新)
- 数据库除关系运算符执行过程详解
- ubuntu mysql修改字符集后不能启动mysql_解决ubuntu下修改my.cnf设置字符集导致mysql无法启动...
- Xamarin.Android开发音乐播放器
- 2017中国商业智能行业研究报告
- python上传Excel文件
- 代码设置环境变量QProcess类
- sql 主键 外键
- 大数据统计分析毕业设计_数据分析毕业设计 大数据可视化毕业设计
- 计算机保研面试中,都有哪些令人窒息的问题?
- USB专用充电端口(DCP) MST2515
- 网络互连有何实际意义?进行网络互连时,有哪些共同的问题需要解决?
- mysql 视图调用存储过程_MySQL视图、存储过程
- 在面试时候,如何简明扼要简述产品流程
- oracle EBS 基于Host并发程序的开发(转)
- python opencv PIL 视频分割成图片 图片合成为视频 修改图片大小(抗锯齿)
- 项目经验分享:基于昇思MindSpore,使用DFCNN和CTC损失函数的声学模型实现
- 挺进中端存储系统,SAS走上夺权路
- 2022年湖南省广播电视播音员主持人(广播电视基础知识)模拟题及答案
- 期货交易的C++简易demo
热门文章
- 初步探讨WPF的ListView控件(涉及模板、查找子控件)
- 批量更改文件编码格式 utf8到gb2312
- 关于CS1061报错(XX不包含XXX的定义,并且找不到类型为XX的第一个参.....)的一种可能的解决的办法...
- Windows下 VS2015编译boost1.62
- [转]Socket的阻塞模式和非阻塞模式
- BizTalk Server 2010新功能介绍(六):BizTalk Mapper (下)
- 零基础学Java的书籍,值得收藏
- v-charts显示标题
- python 入门学习篇(一),呵呵呵
- Objective-C 内存管理机制