HTML5之WebSocket入门3 -通信模型socket.io


Posted in Javascript onAugust 21, 2015

socket.io为什么会诞生呢?请看下面文字说明。

为什么需要socket.io?

    node.js提供了高效的服务端运行环境,但是由于浏览器端对HTML5的支持不一,为了兼容所有浏览器,提供卓越的实时的用户体验,并且为程序员提供客户端与服务端一致的编程体验,于是socket.io诞生。

    socket.io设计的目标是支持任何的浏览器,任何Mobile设备。目前支持主流的PC浏览器(IE,Safari,Chrome,Firefox,Opera等),Mobile浏览器(iphone Safari/ipad Safari/android WebKit/WebOS WebKit等)。

    socket.io基于node.js并简化了WebSocket API,统一了各种通信API。它支持:WebSocket, Flash Socket, AJAX long-polling, AJAX multipart streaming, Forever IFrame, JSONP polling。

    socket.io解决了实时的通信问题,并统一了服务端与客户端的编程方式。启动了socket以后,就像建立了一条客户端与服务端的管道,两边可以互通有无。

安装

    在命令行中执行:npm install socket.io 即可安装。

服务端编程模型

    服务端编程还是与普通服务器一样,启动服务器,提供服务,处理事件。

比如下面的server.js:

var http = require('http')
  , url = require('url')
  , fs = require('fs')
  , server;
server = http.createServer(function(req, res){
  // your normal server code
  var path = url.parse(req.url).pathname;
  switch (path){
  case '/':
   res.writeHead(200, {'Content-Type': 'text/html'});
   res.write('<h1>Hello! Try the <a href="/index.html">Socket.io Test</a></h1>');
   res.end();
   break;
  case '/index.html':
   fs.readFile(__dirname + path, function(err, data){
    if (err) return send404(res);
    res.writeHead(200, {'Content-Type': path == 'json.js' ? 'text/javascript' : 'text/html'})
    res.write(data, 'utf8');
    res.end();
   });
   break;
  default: send404(res);
  }
}),
send404 = function(res){
  res.writeHead(404);
  res.write('404');
  res.end();
};
server.listen(8080);
var io = require('socket.io').listen(server);
io.sockets.on('connection', function(socket){
 console.log("Connection " + socket.id + " accepted.");
 socket.on('message', function(message){
    console.log("Received message: " + message + " - from client " + socket.id);
 });
 socket.on('disconnect', function(){
  console.log("Connection " + socket.id + " terminated.");
 });
});

客户端编程模型 

    客户端编程也是相似的处理方式,连接服务器,交互信息。

比如下面的index.html页面:

<!doctype html>
<html>
 <head>
  <title>Socket.io Test</title>
  <script src="/json.js"></script> <!-- for ie -->
  <script src="/socket.io/socket.io.js"></script>
 </head>
 <body>  
  <script>    
  var socket;
  var firstconnect = true;
  function connect() {
   if(firstconnect) {
    socket = io.connect(null);
    socket.on('message', function(data){ message(data); });
    socket.on('connect', function(){ status_update("Connected to Server"); });
    socket.on('disconnect', function(){ status_update("Disconnected from Server"); });
    socket.on('reconnect', function(){ status_update("Reconnected to Server"); });
    socket.on('reconnecting', function( nextRetry ){ status_update("Reconnecting in " 
     + nextRetry + " seconds"); });
    socket.on('reconnect_failed', function(){ message("Reconnect Failed"); });
    firstconnect = false;
   }
   else {
    socket.socket.reconnect();
   }
  }
  function disconnect() {
   socket.disconnect();
  }
  function message(data) {
   document.getElementById('message').innerHTML = "Server says: " + data;
  }
  function status_update(txt){
   document.getElementById('status').innerHTML = txt;
  }
  function esc(msg){
   return msg.replace(/</g, '<').replace(/>/g, '>');
  }
  function send() {
   socket.send("Hello Server!");  
  };    
  </script>
  <h1>Socket.io Test</h1>
  <div><p id="status">Waiting for input</p></div>
  <div><p id="message"></p></div> 
  <button id="connect" onClick='connect()'/>Connect</button>
  <button id="disconnect" onClick='disconnect()'>Disconnect</button>
  <button id="send" onClick='send()'/>Send Message</button>
 </body>
</html>

注意事项

1. 启动服务器还是交给node,打开命令行窗口,定位到server.js所在文件夹,输入node server.js启动服务器。

    在上面的index.html中,注意这行:<script src="/socket.io/socket.io.js"></script>。如果不想使用本地的socket.io脚本,可

以直接使用下面这个公开的脚本:

<script src="http://cdn.socket.io/stable/socket.io.js"></script>

    此外需要注意这行:socket = io.connect(null)。

这里的null代表连接本地服务,可以换成"localhost",效果也是一样的。

2. 可以使用socket.io直接启动http服务。

例如:

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 io.sockets.emit('this', { will: 'be received by everyone'});
});

3. socket.io可以直接通过send方法发送消息,使用message事件接收消息,例如:

//server.js
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.on('message', function () { });
});
//index.html
<script>
 var socket = io.connect('http://localhost/');
 socket.on('connect', function () {
  socket.send('hi');
  socket.on('message', function (msg) {
   // my msg
  });
 });
</script>

4. 发送和处理数据

    两端可以互发事件,互发数据,相互通信。发送事件的代码为:socket.emit(action, data, function),其中action为事件的名称,data为数据,function为回调函数;处理事件代码为:socket.on(action,function),如果emit发送的时候有数据data,则function中参数包含了这个数据。socket.io除了发送和处理内置事件,如connect, disconnect, message。还允许发送和处理自定义事件,例如:

//服务端:

io.sockets.on('connection', function (socket) {
 socket.emit('news', { hello: 'world' });
 socket.on('my other event', function (data) {
  console.log(data);
 });
});

//客户端:

<script src="/socket.io/socket.io.js"></script>
<script>
 var socket = io.connect('http://localhost');
 socket.on('news', function (data) {
  console.log(data);
  socket.emit('my other event', { my: 'data' });
 });
</script>

5. 从上面可以看出来,发送数据的时候,send和emit是都可以使用的。只不过emit更是强化了自定义事件的处理。

6. 可以在服务端使用socket的get/set方法存储客服端的相关数据,例如:

//服务端

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.on('set nickname', function (name) {
  socket.set('nickname', name, function () { socket.emit('ready'); });
 });
 socket.on('msg', function () {
  socket.get('nickname', function (err, name) {
   console.log('Chat message by ', name);
  });
 });
});

//客户端

<script>
 var socket = io.connect('http://localhost');
 socket.on('connect', function () {
  socket.emit('set nickname', confirm('What is your nickname?'));
  socket.on('ready', function () {
   console.log('Connected !');
   socket.emit('msg', confirm('What is your message?'));
  });
 });
</script>

7. 可以广播消息,比如聊天室中给除了当前socket连接外的所有人发消息。

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.broadcast.emit('user connected');
});

8. 可以在同一次链接中,建立多个互相独立的通道,而不是建立多次链接。这个官方叫法是“多个namespace”,比如官方的例子:

var io = require('socket.io').listen(80);
//Server
var chat = io
 .of('/chat')
 .on('connection', function (socket) {
  socket.emit('a message', {
    that: 'only'
   , '/chat': 'will get'
  });
  chat.emit('a message', {
    everyone: 'in'
   , '/chat': 'will get'
  });
 });
var news = io
 .of('/news')
 .on('connection', function (socket) {
  socket.emit('item', { news: 'item' });
 });
//Client
<script>
 var chat = io.connect('http://localhost/chat')
  , news = io.connect('http://localhost/news');
 chat.on('connect', function () {
  chat.emit('hi!');
 });
 news.on('news', function () {
  news.emit('woot');
 });
</script>

 socket.io的配置 

    socket.io的配置很简单,如果配置过express的话,你会发现它们几乎是使用差不多的方式。先看个小例子:

var io = require('socket.io').listen(80);
io.configure('production', function(){
 io.enable('browser client etag');
 io.set('log level', 1);
 io.set('transports', [
  'websocket'
 , 'flashsocket'
 , 'htmlfile'
 , 'xhr-polling'
 , 'jsonp-polling'
 ]);
});
io.configure('development', function(){
 io.set('transports', ['websocket']);
});

可以看到,socket.io使用configure, set, enable, disable进行配置。

1. 使用configure方法配置不同的运行环境下的行为;就是说在不同的环境下,启用不同的配置选项。configure的第一个参数是运行环境,第二个参数是进行配置的function。运行环境典型的如production或者是development,当然这里可以使任意的字符串。如果configure的第一个参数省略的话,说明后面的配置是公用的,不管是什么环境下,都有效。

2. 配置好各种运行环境了,那么如何设置当前运行在那个环境下呢?这个是通过在命令行中修改环境变量NODE_ENV的值实现的。

3. 在configure的配置函数中,我们可以使用set, enable, disable设置相关选项。

4. 具体可以配置的项参考:https://github.com/LearnBoost/Socket.IO/wiki/Configuring-Socket.IO
实用参考

socket.io介绍:http://davidchambersdesign.com/getting-started-with-socket.io/

socket.io安装和使用说明:http://socket.io/

socket.io Wiki:https://github.com/LearnBoost/Socket.IO/wiki

Javascript 相关文章推荐
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 #Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 #Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 #Javascript
jquery结婚电子请柬特效源码分享
Aug 21 #Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 #Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 #Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 #Javascript
You might like
PHP类继承 extends使用介绍
2014/01/14 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
js给selected添加options的方法
2015/05/06 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
python中ConfigParse模块的用法
2014/09/29 Python
初步探究Python程序的执行原理
2015/04/11 Python
Python算术运算符实例详解
2017/05/31 Python
python中while和for的区别总结
2019/06/28 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
审计专业自荐信范文
2014/04/21 职场文书
六查六看六改心得体会
2014/10/14 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL
python turtle绘图
2022/05/04 Python