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聊天室~简单实用的更多相关文章
- 利用socket.io+nodejs打造简单聊天室
代码地址如下:http://www.demodashi.com/demo/11579.html 界面展示: 首先展示demo的结果界面,只是简单消息的发送和接收,包括发送文字和发送图片. ws说明: ...
- Android 基于Socket的聊天室(一)
Socket是TCP/IP协议上的一种通信,在通信的两端各建立一个Socket,从而在通信的两端之间形成网络虚拟链路.一旦建立了虚拟的网络链路,两端的程序就可以通过虚拟链路进行通信. Client A ...
- Python Socket 编程——聊天室示例程序
上一篇 我们学习了简单的 Python TCP Socket 编程,通过分别写服务端和客户端的代码了解基本的 Python Socket 编程模型.本文再通过一个例子来加强一下对 Socket 编程的 ...
- java基于socket公共聊天室的实现
项目:一个公共聊天室功能的实现,实现了登录聊天,保存聊天记录等功能. 一.实现代码 1.客户端 ChatClient.java import java.io.BufferedReader; impor ...
- Android进阶(十五)socket通信——聊天室
想做一个聊天室,花费了将近一天的时间,各种错误.讲解知识点之前,絮叨几句:动手能力还是很重要的,有时看似简单的一个问题,当你真正着手去解决的时候就有可能会遇到各种各样的问题,原因之一就是因为你的知识储 ...
- Python Socket 编程——聊天室演示样例程序
上一篇 我们学习了简单的 Python TCP Socket 编程,通过分别写服务端和client的代码了解主要的 Python Socket 编程模型.本文再通过一个样例来加强一下对 Socket ...
- nodejs之socket.io 聊天实现
写在前面:最近很火的“996”话题,可谓是引起一片热议,马老师说:能够996应该是幸运的,996是对奋斗者的一种机遇(记得不是很清楚).996缺少的是自己的空闲时间了,当我是空闲的时候偶尔996挺好的 ...
- nodejs 聊天室简单实现
前言 博客园的样式真心不会用啊,看着大大们的博客各种好看,心里无奈啊,只能慢慢摸索了. 最近的项目nodejs+wcf+app,app直接从wcf服务获取数据,nodejs作为单独的服务器为app提供 ...
- 基于React,Redux以及wilddog的聊天室简单实现
本文主要是使用ReactJs和Redux来实现一个聊天功能的页面,页面极其简单.使用React时间不长,还是个noob,有不对之处欢迎大家吐槽指正. 还要指出这里没有使用到websocket等技术来实 ...
随机推荐
- Util应用程序框架公共操作类(三):数据类型转换公共操作类(扩展篇)
上一篇以TDD方式介绍了数据类型转换公共操作类的开发,并提供了单元测试和实现代码,本文将演示通过扩展方法来增强公共操作类,以便调用时更加简化. 下面以字符串转换为List<Guid>为例进 ...
- 编写atoi库函数
看到很多面试书和博客都提到编写atoi函数,在很多面试中面试官都会要求应聘者当场写出atoi函数的实现代码,但基本很少人能写的完全正确,倒不是这道题有多么高深的算法,有多么复杂的数据结构,只因为这道题 ...
- Puppet简易入门
一.查看官方提供的下载源 https://docs.puppet.com/guides/puppetlabs_package_repositories.html 二. 选择对应系统的下载源 因为本机是 ...
- css:图标与文字对齐的两种方法
(好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...
- 小菜学习Winform(七)系统托盘
前言 有些程序在关闭或最小化的时候会隐藏在系统托盘中,双击或右击会重新显示,winform实现其功能很简单,这边就简单的介绍下. 实现 在winform实现托盘使用notifyIcon控件,如果加菜单 ...
- Java 理论与实践: 正确使用 Volatile 变量--转
原文地址:http://www.ibm.com/developerworks/cn/java/j-jtp06197.html Java 语言中的 volatile 变量可以被看作是一种 “程度较轻的 ...
- DotNet处理服务器路径的方法
项目中需要使用到路径处理的地方比较多,对于路径的解析和匹配有时较为繁琐,现在提供一个对路径进行解析的方法: 1.验证设置路径字符串: /// <summary> /// 验证设置路径字符串 ...
- Mongoose使用案例--让JSON数据直接入库MongoDB
目录 1.准备工作. 2.配置Mongoose. 3.创建目录及文件. 4.插入数据,POST提交JSON增加一条记录. 5.查询数据,取出你插入数据库的记录. 一.准备工作 使用Express4创建 ...
- 用API网关把API管起来
最开始只是想找个API网关防止API被恶意请求,找了一圈发现基于Nginx的OpenResty(Lua语言)扩展模块Orange挺好(也找了Kong,但是感觉复杂了点没用),还偷懒用Vagrant结合 ...
- MS SQL验证字符串是否包含有大小写字母
昨晚有实现一个小功能,就是在MS SQL Server中,检查字符串是否包含有大小写字母.通常应用在字符串的复杂度. ) = N'SDFfgGRYJhhTYUJ' IF LOWER(@s) COLLA ...