实时通讯Socket.io
Socket.IO是一个WebSocket库，包括了客户端的js和服务器端的nodejs，它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。
O(∩_∩)O~交个朋友吧！ 有什么问题发私信给我。......
1. WebScoket
2. socket.io
3. 安装部署
4. 服务监听
5. 注册事件
6. 启动服务
7. 客户端引用
8. 连接服务
9. 实时通信
10. 课程小结
汇智网是一个学习最前沿编程技术的平台,互动式的学习和实时在线的练习,能让你迅速进入状态,快速掌握知识技能。
微信订阅号&& 您当前的位置：
【Java技术】实现远程实时通信 Html5:Canvas+WebSocket
更新时间： 15:44 &来源：源代码教育
随着网络的迅速发展，实时通信的应用场景越来越多，比如聊天室、股票的幅度、火车票数量、最新微博列表、实时投票、即时消息、地理位置等等，虽然我们已经在使用这些应用，但是这些应用场景多数都是&伪实时&，我们并不是在数据发生变化时，第一时间拿到的。
传统&伪实时&和&实时&实现方案：
1、Ajax轮询 : 页面打开的后，通过一个定时器每间隔一段时间后使用Ajax往服务器端发送请求，试图拿到最新的数据，服务器进行返回，并且关闭连接;(实则就是客户端主动去找服务器端要最新数据，客户端不管服务器端是否真的有数据，都会去找服务器端要);
2、Ajax长轮询:页面打开的后，客户端向服务器端发出一个请求并打开一个连接，服务器端接收到这个请求后，并不是马上响应，而是等最新数据时才进行响应，服务器端响应完毕后，客户端再次发送一个请求;(实则就是客户端主动找服务器端要最新数据，服务器端如果有最新数据就进行响应，没有最新数据就一直等到有新数据才进行响应);
3、Flash Socket，Flash 内部有自己的Socket实现完成数据交换，再通过JavaScript 调用，从而达到实时传输目的。此方式比轮询更高效，多数的企业客服都是采用这种方案。不过必须保证浏览器安装了flash插件，不过手机浏览器几乎都不支持
什么是WebSocket?
WebSocket是HTML5一种新的协议。它实现了客户端与服务器相互通信的办法。传统客户端与服务器端只能是客户端主动找服务器端拿数据，而服务器的无法主动把数据给客户端;而WebSocket则让服务器端把数据推给客户端;我们来看看一个现实生活中的例子：老板发的了一条消息：&全体人员明天加班&，传统方式：每一个员工需要主动的去公告栏获取这条信息，如果某一个员工没有去公告栏，那么就只有等着老板批斗，而WebSocket方式：每一个员工在上班的时候，一条明天加班的噩耗就来了，躲都躲不了;
结合交互图:
图 1. 传统 HTTP 请求响应客户端服务器交互图
图 2. WebSocket 请求响应客户端服务器交互图
对比传统HTTP与WebSocket 可以看出，传统方式客户端与服务器端交互都需要进行open/close,而WebSocket只要打开后就可以不端的进行交互,适合做实时通信;
NodeJS+Socket.io实时通信实战
NodeJS：服务器端运行JS的平台;
Socket.io: socket.io 是 websocket 公认标准框架;
使用NodeJS+Socket.io我们只需要执行少许的命令和代码就可以轻松的体验WebScoket强大功能;GO;
(注意：如果不node环境不知道如何搭建，可以查看我写NodeJs入门文章)
第一步新建NodeJs Web环境：
命令切换到项目目录
第二步添加socekt.io包：
第三步项目依赖包：
基础的Web环境已经搭建完毕了，你可以启动Web项目尝试访问;
浏览器中输入：http://localhost:3000; 检查是否有网页;
第四步让websocket处理请求
找到你项目目录下面的F:\node-websocket\bin\www文件，使用文本文件打开;
第五步修改页面添加消息列表和消息发送框：
页面位置：F:\nodeproject\socket-node\views\index.ejs
重启服务器,打开浏览器新建两个窗口http://localhost/ ，发送消息尝试一下;
成都源代码教育咨询有限公司后使用快捷导航没有帐号？
Socket.io在线聊天室
查看: 17354|
评论: |原作者: 张丹(Conan)|来自:
摘要: 网络聊天室在web1.0的时代就出现了，但当时技术支持比较有限，大都是通过浏览器插件BHO，JavaApplet，Flash实现的。如今HTML5技术风起云涌，通过websocket实现的网络聊天室，被定义为websocket的第一个实验，就像Hel ...
将介绍如何利script做为服务端脚本，通过Nodejs框架web开发。Nodejs框架是基于V8的引擎，是目前速度最快的
Javascript引擎。chrome浏览器就基于V8，同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express，可以帮
助我们迅速建立web站点，比起PHP的开发效率更高，而且学习曲线更低。非常适合小型网站，个性化网站，我们自己的Geek网站！！
张丹(Conan), 程序员Java,R,PHP,Javascript
weibo：@Conan_Z
转载请注明出处：
前言网络聊天室在web1.0的时代就出现了，但当时技术支持比较有限，大都是通过浏览器插件BHO，JavaApplet，Flash实现的。如今
HTML5技术风起云涌，通过websocket实现的网络聊天室，被定义为websocket的第一个实验，就像Hello World一样的简单。今天我也动手完成了这个实验，感觉真的很爽！目录
socket.io介绍
服务器端和客户端通信设计
服务器端实现
客户端实现
完整案例代码
1. socket.io介绍socket.io一个是基于Nodejs架构体系的，支持websocket的协议用于时时通信的一个软件包。socket.io 给跨浏览器构建实时应用提供了完整的封装，socket.io完全由javascript实现。基于Nodejs实现webscoket其他的框架，请参考文章：2. 服务器端和客户端通信设计上图中client1 和 server 描述通信过程，client2描述对其他的客户端，通过广播进行消息通信。
client1向server发起连接请求
server接受client的连接
client1输入登陆用户名
server返回欢迎语
server通过广播告诉其他在线的用户，client1已登陆
client1发送聊天信息
server返回聊天信息(可省略)
server通过广播告诉其他在线的用户，client1的聊天消息
client1关闭连接，退出登陆
server通过广播告诉其他在线的用户，client1已退出
我们看一下测试截图：
左边: aaa 登陆
右边: bbb 登陆
左边: aaa 收到 bbb登陆欢迎消息
aaa 和 bbb 实现对话
右边: bbb 刷新浏览自动退出
左边: aaa 收到 bbb的退出消息
右边: CCC 登陆
左边: aaa 收到 CCC 登陆欢迎消息
aaa 和 CCC 实现对话
3. 服务器端实现我们这里使用socket.io和express3的混合模式，让HTTP请求和WebSocket请求都使用3000端口。服务器端实现，只有一个核心文件app.js。
//引入程序包
var express = require('express')
, path = require('path')
, app = express()
, server = require('http').createServer(app)
, io = require('socket.io').listen(server);
//设置日志级别
io.set('log level', 1);
//WebSocket连接监听
io.on('connection', function (socket) {
socket.emit('open');//通知客户端已连接
// 打印握手信息
// console.log(socket.handshake);
// 构造客户端对象
var client = {
socket:socket,
name:false,
color:getColor()
// 对message事件的监听
socket.on('message', function(msg){
var obj = {time:getTime(),color:client.color};
// 判断是不是第一次连接，以第一条消息作为用户名
if(!client.name){
client.name =
obj['text']=client.
obj['author']='System';
obj['type']='welcome';
console.log(client.name + ' login');
//返回欢迎语
socket.emit('system',obj);
//广播新用户已登陆
socket.broadcast.emit('system',obj);
//如果不是第一次的连接，正常的聊天消息
obj['text']=
obj['author']=client.
obj['type']='message';
console.log(client.name + ' say: ' + msg);
// 返回消息（可以省略）
socket.emit('message',obj);
// 广播向其他用户发消息
socket.broadcast.emit('message',obj);
//监听出退事件
socket.on('disconnect', function () {
var obj = {
time:getTime(),
color:client.color,
author:'System',
text:client.name,
type:'disconnect'
// 广播用户已退出
socket.broadcast.emit('system',obj);
console.log(client.name + 'Disconnect');
//express基本配置
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
app.configure('development', function(){
app.use(express.errorHandler());
// 指定webscoket的客户端的html文件
app.get('/', function(req, res){
res.sendfile('views/chat.html');
server.listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
var getTime=function(){
var date = new Date();
return date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
var getColor=function(){
var colors = ['aliceblue','antiquewhite','aqua','aquamarine','pink','red','green',
'orange','blue','blueviolet','brown','burlywood','cadetblue'];
return colors[Math.round(Math.random() * 10000 % colors.length)];
4. 客户端实现这里我们需要定义几个文件：chat.html, chat.js, jquery.min.js, main.css1). views/chat.html
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Socket.io - Simple chat&/title&
&link rel="stylesheet" type="text/css" href="css/main.css"&
&script src="javascripts/jquery.min.js"&&/script&
&script src="/socket.io/socket.io.js"&&/script&
&script src="javascripts/chat.js"&&/script&
&h1&Socket.io - Simple chat room&/h1&
&span id="status"&Connecting...&/span&
&input type="text" id="input"/&
&div id="content"&&/div&
2). public/javascript/chat.js
$(function () {
var content = $('#content');
var status = $('#status');
var input = $('#input');
var myName =
//建立websocket连接
socket = io.connect('http://localhost:3000');
//收到server的连接确认
socket.on('open',function(){
status.text('Choose a name:');
//监听system事件，判断welcome或者disconnect，打印系统消息信息
socket.on('system',function(json){
var p = '';
if (json.type === 'welcome'){
if(myName==json.text) status.text(myName + ': ').css('color', json.color);
p = '&p style="background:'+json.color+'"&system @ '+ json.time+ ' : Welcome ' + json.text +'&/p&';
}else if(json.type == 'disconnect'){
p = '&p style="background:'+json.color+'"&system @ '+ json.time+ ' : Bye ' + json.text +'&/p&';
content.prepend(p);
//监听message事件，打印消息信息
socket.on('message',function(json){
var p = '&p&&span style="color:'+json.color+';"&' + json.author+'&/span& @ '+ json.time+ ' : '+json.text+'&/p&';
content.prepend(p);
//通过“回车”提交聊天信息
input.keydown(function(e) {
if (e.keyCode === 13) {
var msg = $(this).val();
socket.send(msg);
$(this).val('');
if (myName === false) {
3). public/javascript/jquery.min.js
从jquery官方下载: / 4). public/css/main.css
* {padding:0 margin:0}
body{font-family: font-size:12margin:10}
p {line-height:18padding:2}
div {width:500}
#content {
background:#
border-radius:5
border:1px solid #CCC;
margin-top:10
border-radius:2
border:1px solid #
margin-top:10
margin-top:15
5. 完整案例代码项目已经上传到github: /bsspirit/chat-websocket下载，安装，启动服务器
git clone /bsspirit/chat-websocket.git
npm install
node app.js
打开浏览器
可以多打开几个窗口，模拟不同用户有的对话。http://localhost:3000做完实验，感觉棒极了。技术创新的革命！！
转载请注明出处：
刚表态过的朋友 ()1600人阅读
HTML5（52）
Node.js（50）
在做商品拍卖的时候，要求在商品的拍卖页面需要实时的更新当前商品的最高价格。实现的方式有很多,比如：
1.setInterval每隔n秒去异步拉取数据(缺点:更新不够实时)
2.&方式推送数据(缺点:服务端需要在死循环中反复查询数据库)
3.websocket推送数据(缺点:仅支持html5标准的浏览器)
socket.io的简要介绍
所有客户端都通过socket.io挂在nodejs服务器上(注意:&只是挂着，不需要任何循环，因为它是事件驱动的)；需要推送消息了，服务器就与nodejs通信(比如访问某个地址来实现)，告诉它推送什么消息到哪里；nodejs收到推送信号后，则通过socket.io实时传输数据给浏览器。这个其实也是一条单向的路，因为nodejs服务器不具备与php通信的能力，实际上也不需要，网页上直接连php就可以了。
可以参考这篇文章:
接下来开始整理下思路
1.正如简要介绍中所说的首先要将客户端都通过socket.io挂在nodejs服务器上.
在用户进入拍卖页面后开始连接socket.io ，然后将当前客户端的'用户id','拍卖id','当前最高价','socket.id'存储至node.js全局变量socketUser中.
var socket = io.connect(&http://demo.xiaocai.name&:339&);
socket.on('conn', function (data)&{
& var postdata =&{
'c_id'&&&: PageValue.charinfo.c_id,&&&&&//用户id
&&&&&&&&'c_name'&: PageValue.charinfo.c_name,&&&//用户昵称
&&&&&&&&'guid'&&&: data.id,//拍卖id
&&&&&&&&'price'&&: data.max_price,//当前最高价
& socket.emit('login', postdata,function(result){
&&&& console.log('登陆成功');
var & sio &&&&= require('socket.io');
var & express = require('express');
var & app &=& module.export = express.createServer();
var socketUser =&{};
io&&= sio.listen(app);
io.set('log level', 1);//将socket.io中的debug信息关闭
//监听连接
io.sockets.on('connection', function (socket){
&&&&//响应连接
&&& io.sockets.emit('conn',&{ text:&'socketId:'+socket.id});
&&&&//监听用户登录并存储socket
&&& socket.on('login', function (data,fn)&{
socketUser[socket.id]&=&{'c_id':data.c_id,'guid':data.guid,'price':data.price,'socket':socket};
&&&//监听断线
&&& socket.on('disconnect', function(){
&&&&&&& console.log('-链接断开['+socket.id+']-');
&&&&&&& delete socketUser[socket.id];
2.需要推送消息时服务器就与nodejs通信告诉它推送什么消息到哪里
当有用户出价时最高价格将发生改变,这时候通过socket.io来监听这个动作，接着向挂在nodejs服务器上的socket客户端推送数据.
前端js:某个客户端用户给出了新的价格时发出请求‘postprice’并带上当前拍卖的id
socket.emit('postprice',&{'guid':data.id});
服务端nodejs:服务端监听请求postprice并执行pushprice方法向其它客户端推送消息
socket.on('postprice', function (data,fn)&{
&&& console.log('-用户出价['+data.guid+']-');
&&& pushprice(data.guid);
从redis缓存中读取出当前拍卖的最高价,然后遍历该拍卖下的socketUser集合,若它的价格低于取出的最高价则向它推送最新的价格(并且更新它的最高价).GetRedisKey是个读取reids的方法该方法在底部贴出.
&&& var pushprice = function(guid){
&&&&&&& console.log('-推送数据['+guid+']-');
&&&&&&& common_func.GetRedisKey(&AuctionMaxPrice-&+guid,function(val){
&&&&&&&&&&& if(!val){
&&&&&&&&&&&&&&&
&&&&&&&&&&&&}
&&&&&&&&&&& for(var values in socketUser){
&&&&&&&&&&&&&&& if(& parseFloat(socketUser[values].price)&& val && socketUser[values].guid == guid ){
&&&&&&&&&&&&&&&&&&& socketUser[values].socket.emit('receive',{'nowprice':val});
&&&&&&&&&&&&&&&&&&& socketUser[values].price =
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&});
3.客户端接受推送的数据
socket.on('receive',function(maxprice){
&&&&$('#NowUserTxt').html('￥'+maxprice);
GetRedisKey是公共函数中获得redis缓存的方法,这边单独贴出来
exports.GetRedisKey = function(key,fun){
&&& if( typeof redis_client ==&'undefined'&){
&&&&&&& var redis &&&&&= require(&redis&);
&&&&&&& redis_client &&= redis.createClient(RedisPort,RedisHost);
&&&&&&& redis_client.on(&error&, function (err)&{
&&&&&&&&&&& common_func.insertlog(&Error(redis):&&&+ err);
&&&&&&&&})
&&& redis_client.get(key, function (err, reply)&{
&&&&&&& if(reply){
&&&&&&&&&&& fun(reply.toString());
&&&&&&&&}else{
&&&&&&&&&&& fun(false);
&&&&&&&&&&& common_func.insertlog('Error(redis): get('+key+') not data');
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1340094次
积分：17106
积分：17106
排名：第478名
原创：80篇
转载：1877篇
评论：108条
(1)(24)(16)(43)(27)(7)(54)(12)(48)(18)(13)(6)(4)(64)(2)(1)(3)(28)(56)(51)(59)(16)(44)(12)(4)(84)(70)(60)(84)(63)(14)(10)(68)(73)(84)(10)(9)(44)(91)(41)(116)(153)(180)(101)(3)