上一篇介绍了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. spring task定时器笔记

    定时器有两种方式 1.延迟启动 <bean id="timerTaskRunnerChain" class="bingo.uam.task.TimerTaskRun ...

  2. 使用checkbox实现纯CSS下拉框

    在这个例子中,我们会看到一个纯CSS制作的下拉框.主要是要用到了HTML元素的checkbox 和CSS3选择器,并没有用到JavaScript.例子如下: Click to Expand Link ...

  3. ASP.NET MVC another entity of the same type already has the same primary key value

    ASP.NET MVC项目 Repository层中,Update.Delete总是失败 another entity of the same type already has the same pr ...

  4. Thread.CurrentPrincipal & HttpContext.Current.User

    据说要这样写才稳妥 // This principal will flow throughout the request.VoyagerPrincipal principal = new Voyage ...

  5. 【原/转】iOS中非常强大的过滤器:NSPredicate

    在APPLE的官方Demo:UICatalog中实现UISearchBar模糊搜索功能是这么做的: - (void)viewDidLoad { [super viewDidLoad]; self.al ...

  6. iOS开发--隐藏（去除）导航栏底部横线

    iOS开发大部分情况下会使用到导航栏,由于我司的app导航栏需要与下面紧挨着的窗口颜色一致,导航栏底部的横线就会影响这个美观,LZ使用了以下方法.觉得不错,分享来给小伙伴们. 1)声明UIImageV ...

  7. 快速排序（java版）

    public class QuickSortTest{ //比较与交换 private static int partition(int[] source, int low, int hight) { ...

  8. 关于git

    一.Git基础教程  01.[入门练习]廖雪峰 git教程网:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8 ...

  9. 敏捷软件开发（3）---COMMAND 模式 & Active Object 模式

    COMMAND 模式 command模式非常简单,简单到你无法想象的地方. public interface Command { void execute(); } 这就是一个command模式的样子 ...

  10. docker入门(1) Centos 7 下docker的安装

    centos 7安装docker 什么是 Docker Docker 是一个开源项目,诞生于 2013 年初,最初是 dotCloud 公司内部的一个业余项目.它基于 Google 公司推出的 Go ...