上一篇介绍了websocket的基本用法.这篇介绍websocket的一个框架: socket.io

socket.io是一个既可以用在客户端又可以用在服务器端的框架. 本篇介绍socket.io在客户端和node后端的基本用法

首先进入项目的根目录,然后执行 npm install socket.io

客户端:

1.链入socket.io.js:

<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="socket.io/socket.io.js"></script>

特别注意,不需要创建一个文件夹socket.io,再在里面放入socket.io.js这个文件.

只要在根目录下在npm install socket.io,就可以了.上面两种写法都ok,但是不可以写 src="socket.io.js"

2.创建一个连接:

var iosocket = io.connect();

3.连接事件:

iosocket.on('connect',function(e){...})

4.接收到数据事件:

iosocket.on('message',function(data){

   console.log(data)

})

data就是接收到的数据

5.断开连接事件:

iosocket.on('disconnect', function(e){...});

6.向服务器端发送数据:

iosocket.send(data)

data就是要发送的数据

服务器端:

1.获取socket.io模块:

var socketio = require('socket.io')

2.创建一个服务端:

var server = http.createServer(function(req, res) {

  ...

}).listen(3000, function() {

  console.log('Listening at: http://localhost:3000');

});

3.创建服务器端对应的socket:

var io = socketio(server);

4.连接,收发数据:

io.on('connection',function(socket){

    socket.on('message',function(data){

        console.log('Message Received: ', data);

        socket.broadcast.emit('message', data);

    })

});

下面举个完整的实例,模拟两人聊天:

index.html:

<html>

<head>

  <meta charset="utf-8">

  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

  <script type="text/javascript" src="http://cdnimg.ocj.com.cn/common/js/jquery-1.10.2.min.js"></script>

  <script type="text/javascript" src="socket.io/socket.io.js"></script>

  <style>

    .bunny {

      color:#AF4442

    }

    .cat {

      color:#3170A9

    }

  </style>

  <script>

    $(function(){

      var name;

      $('#myName').keypress(function(event) {

        if(event.which == 13) {

          event.preventDefault();

          name = $(this).val();

          var myname = $('<p><span class="label label-default">'+name+'</span></p>');

          $(this).parent('.form-group').before(myname);

          $(this).parent('.form-group').remove();

        }

      });

      var iosocket = io.connect();

      iosocket.on('connect', function () {

        $('.container').prepend($('<div class="alert alert-success" role="alert">已连接</div>'));

      });

      iosocket.on('message', function(message) {

        var messages = message.split(';');

        $('#incomingChatMessages').append($('<li class='+messages[0]+'></li>').text(messages[0]+' say:'+messages[1]));

      });

      iosocket.on('disconnect', function() {

        $('.container').prepend($('<div class="alert alert-danger" role="alert">已断开</div>'));

      });

      $('#outgoingChatMessage').keypress(function(event) {

        if(event.which == 13) {

          event.preventDefault();

          iosocket.send(name+';'+$('#outgoingChatMessage').val());

          $('#incomingChatMessages').append($('<li class='+name+'></li>').text(name+' say:'+$('#outgoingChatMessage').val()));

          $('#outgoingChatMessage').val('');

        }

      });

    });

  </script>

</head>

<body>

<div class="container">

  Incoming Chat:&nbsp;<ul id="incomingChatMessages"></ul>

  <br />

  <div class="form-group">

    <label for="myName">name:</label>

    <input type="text" class="form-control" id="myName" placeholder="Enter Your Name">

  </div>

  <div class="form-group">

    <label for="outgoingChatMessage">enter:</label>

    <input type="text" class="form-control" id="outgoingChatMessage" placeholder="Enter info">

  </div>

</div>

</body>

</html>

分析:

1.创建一个name变量,用于保存用户输入的昵称.在这里都是虚假数据,所以只能输入cat,或者bunny(因为定义的样式是这两个类名),其中,cat发送的消息是蓝色的,bunny发送的消息是红色的.

2.先输入用户名,保存当前用户名(相当于聊天中的登录)

3.创建socket

4.连接成功的时候,显示提示"已连接"

5.接收数据成功的时候,把接收到的对方发送的消息插入到聊天对话中

6.按回车键发送消息,把自己发送的消息也插入到聊天对话中

7.连接断开的时候,显示提示"已断开"

app.js:

var fs = require('fs')

    , http = require('http')

    , socketio = require('socket.io');

var server = http.createServer(function(req, res) {

  res.writeHead(200, { 'Content-type': 'text/html'});

  res.end(fs.readFileSync(__dirname + '/index.html'));

}).listen(3000, function() {

  console.log('Listening at: http://localhost:3000');

});

var io = socketio(server);

io.on('connection',function(socket){

    socket.on('message',function(data){

        console.log('Message Received: ', data);

        socket.broadcast.emit('message', data);

    })

});

分析:

1.获取socket.io模块

2.创建服务器端,读取index.html内容.

3.创建socket.io的实例,传入server

4.监听connection事件,添加回调

5.监听message事件,添加回调,把接收到的信息再发出去

这个demo运行以后大概是这样的:

打开一个火狐,一个chrome:

分别输入用户名,cat和bunny:

输入用户名后:

然后就猫猫和兔兔就可以开始聊天啦~~

今天就到这里,socket.io还有很多api,很多其他用法,以后会不断深入研究~~~

完整代码:https://github.com/OOP-Code-Bunny/html5/tree/master/nodeWebsocket

HTML5-WebSocket技术学习(2)的更多相关文章

  1. HTML5 WebSocket 技术介绍

    WebSocket是html5规范新引入的功能,用于解决浏览器与后台服务器双向通讯的问题,使用WebSocket技术,后台可以随时向前端推送消息,以保证前后台状态统一,在传统的无状态HTTP协议中,这 ...

  2. Demo源码放送：打通B/S与C/S ！让HTML5 WebSocket与.NET Socket公用同一个服务端！

    随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...

  3. 打通B/S与C/S ！让HTML5 WebSocket与.NET Socket公用同一个服务端！

    随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...

  4. WebSocket+MSE——HTML5 直播技术解析

    作者 | 刘博(又拍云多媒体开发工程师) 当前为了满足比较火热的移动 Web 端直播需求,一系列的 HTML5 直播技术迅速的发展起来. 常见的可用于 HTML5 的直播技术有 HLS.WebSock ...

  5. 对WebSocket技术的学习与探索(二)

    近日重新开始学习WebSocket技术,什么是WebSocket,在<对WebSocket技术的学习与探索(一)>文章中已经说明白了,还没理解可以看看这篇文章http://www.ruan ...

  6. 对WebSocket技术的学习与探索(一)

    WebSocket 简要介绍 WebSocket protocol 是HTML5一种新的协议. 它实现了浏览器与服务器全双工通信(full-duple). 一开始的握手需要借助HTTP请求完成. We ...

  7. 绝版珍珍藏：web前端技术学习指南

    绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...

  8. 常用的Websocket技术一览

    1. 前言 Websocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据 ...

  9. IT软件人员的技术学习内容（写给技术迷茫中的你） - 项目管理系列文章

    前面笔者曾经写过一篇关于IT从业者的职业道路文章(见笔者文:IT从业者的职业道路(从程序员到部门经理) - 项目管理系列文章).然后有读者提建议说写写技术方面的路线,所以就有了本文.本文从初学者到思想 ...

  10. WebSocket技术

    webSocket技术 在html5技术革新中,加入了WebSocket技术 1.webSocket实际是TCP连接 webSocket在最初将发送http连接请求到服务器端, 但是在header中加 ...

随机推荐

  1. windows下mongodb安装与使用

    首先安装mongodb 1.下载地址:http://www.mongodb.org/downloads 2.解压缩到自己想要安装的目录,比如d:\mongodb 3.创建文件夹d:\mongodb\d ...

  2. Failed to upgrade AX 2012 R3 Retail channel database from CU9 to CU11 if SQL Server version was lower than 2012

    I tried to upgrade AX 2012 R3 Retail channel database from CU9 to CU11 for client. after generated n ...

  3. vIDC v2.0 强大的端口转发神器使用总结-开放内网tfs代码服务

    vIDC2.0 端口映射工具,最近在公司闲来无事,想自己整个tfs来管理自己的研究代码. 本来是想用微软Visual Studio提供的免费tfs,但是无奈速度太慢.他们的服务器在美国,中国也没有代理 ...

  4. IFeatureCursor.Flush

    IFeatureCursor.Flush Method Flush any outstanding buffered writes to the database. [Visual Basic .NE ...

  5. 对抗静态分析——so文件的加密

    [预备起~~~]最近在忙找工作的事情,笔试~面试~笔试~面试...很久没有写(pian)文(gao)章(fei).忙了一阵子之后,终于~~~到了选offer的阶段(你家公司不是牛吗,老子不接你家off ...

  6. 高性能JS笔记1——加载执行

    一.脚本位置 1.Script标签尽可能放到Body底部,以减少脚本文件下载对整个页面UI渲染的影响. 2.Script标签永远不要紧跟Link标签后面. 二.组织脚本 1.合并多个文件在一个Scri ...

  7. Ubuntu14.04下安装Hadoop2.5.1 （单机模式）

    本文地址:http://www.cnblogs.com/archimedes/p/hadoop-standalone-mode.html,转载请注明源地址. 欢迎关注我的个人博客:www.wuyudo ...

  8. 二叉堆(binary heap)

    堆(heap) 亦被称为:优先队列(priority queue),是计算机科学中一类特殊的数据结构的统称.堆通常是一个可以被看做一棵树的数组对象.在队列中,调度程序反复提取队列中第一个作业并运行,因 ...

  9. STL--容器适配器（queue、priority_queue、stack）

    适配器(Adaptor)是提供接口映射的模板类.适配器基于其他类来实现新的功能,成员函数可以被添加.隐藏,也可合并以得到新的功能. STL提供了三个容器适配器:queue.priority_queue ...

  10. App开发流程之状态栏和导航栏

    记录状态栏和导航栏的设置和控制,统一在基类视图控制器中完成. 状态栏. 状态栏高度为20,iOS7以后背景完全透明. 样式枚举如下: typedef NS_ENUM(NSInteger, UIStat ...