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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 Javascript
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
html中select语句读取mysql表中内容
2006/10/09 PHP
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
PHP简单系统查询模块代码打包下载
2008/06/07 PHP
通过PHP CLI实现简单的数据库实时监控调度
2009/07/01 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
JS 实现Json查询的方法实例
2013/04/12 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
Python colormap库的安装和使用详情
2020/10/06 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
找到不普通的东西:Bonanza
2016/10/20 全球购物
机电专业大学生求职信
2013/10/04 职场文书
演讲稿开场白
2014/01/13 职场文书
股份转让协议书范本
2015/01/27 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers