一、WebSocket概述

WebSocket协议，是建立在TCP协议上的，而非HTTP协议。

如下：

ws://127.0.0.1或wss://127.0.0.1就是WebSocket请求。

注：ws表示WebSocket协议，wss表示加密的WebSocket协议。

WebSocket的好处就是允许服务器和客服端进行实时地互相通信，而不像Ajax那样，只能由客服端发起请求，并且WebSocket不受同源策略限制，这恰恰是Ajax的软肋。

好了，初步了解WebSocket后，我们就一起一步步探究实现一个Demo吧。

二、客服端之旅

因为是基于WebSocket嘛，那在客服端，首先，得发起一个WebSocket请求。

如下：

<!DOCTYPE html>

    <head>

        <title>WebSocket</title>

    </head>

    <body>

        <script>

            //创建WebSocket对象请求

            var socket = new WebSocket('ws://127.0.0.1:8080/');

        </script>

    </body>

</html>

EntireCode

其次，采用回调函数监听相应事件，并处理。监听事件一共四个：

　　1、  onpen ：请求成功时，触发

　　2、  onclose ：请求关闭时，触发

　　3、  onerror ：请求或连接期间出错时，触发

　　4、  onMessage ：接收服务器发送来的消息时，触发

另，当发送请求时，创建的WebSocket 实例，有个状态值readyState：

　　1、  0 : 代表还没连接或正在连接；

　　2、  1 : 代表连接成功；

　　3、  2 : 代表正在关闭连接；

　　4、  3 : 代表连接关闭。

我们在该demo中加入这四个监听事件。

如下：

<!DOCTYPE html>

    <head>

        <title>WebSocket</title>

    </head>

    <body>

        <script>

            //创建WebSocket对象请求

            var socket = new WebSocket('ws://127.0.0.1:8080/');

            //相应监听事件

            socket.onopen = onOpen;

            socket.onclose = onClose;

            socket.onerror = onError;

            socket.onmessage = onMessage;

        </script>

    </body>

</html>

EntireCode

在这监听事件中，你可以按照你的意愿添加触发函数。

如下：

<!DOCTYPE html>

    <head>

        <title>WebSocket</title>

    </head>

    <body>

        <script>

            var onOpen = function(event){

                console.log('Socket opened. readyState:'+socket.readyState);

                var msg = {

                    type: "message",

                    text: "something",

                    id: "number",

                    time: Date.now()

                };

                //send可以向后台发送字符串、Blob或ArrayBuffer，固传入对象时，利用JSON对其序列化

                socket.send(JSON.stringify(msg));

            };

            var onClose = function(event){

                console.log('Socket closed.readyState:'+socket.readyState);

                console.log('Connected to: ' + event.currentTarget.url);

            };

            var onMessage = function(data){

                console.log("We get signal:");

                console.log(data);

                console.log('onMessageready: ' + socket.readyState);

            };

            var onError = function(event){

                console.log("We got an error.: " + event.data);

            };

            var socket = new WebSocket('ws://127.0.0.1:8080/');

            socket.onopen = onOpen;

            socket.onclose = onClose;

            socket.onerror = onError;

            socket.onmessage = onMessage;

        </script>

    </body>

</html>

EntireCode

三、node创建服务器

借助于node创建一个简易的服务器，以便看清整个WebSocket的流程。

因为是WebSocket协议，所以在node中你需要引入ws模块，假设我们监听的端口号为8080。

如下：

//需要ws模块

var WebSocketServer = require('ws').Server;

//并创建wss服务器

var wss = new WebSocketServer({port: 8080});

EntireCode

接着，我们需要在连接成功后，我们可以向客服端发送一点点东西，如’hello world’，以及监听客服端发送信息来时的事件message。

如下：

//需要ws模块

var WebSocketServer = require('ws').Server;

var wss = new WebSocketServer({port: 8080});

wss.on('connection', function(ws){

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

        var obj = JSON.parse(message);

        console.log('received: %s', obj.time);

    });

    ws.send('hello world');

});

console.log('running!!');

EntireCode

四、运行

前提：因为引入了ws模块，所以需要引入ws模块：npm install ws

首先，运行node搭建的简易服务器（我将其存储在D:WebSocket/server.js）。

如下：

接着，运行客服端代码，打开chrome调试器得下：

再看看刚才的node环境，得下：

固，它们已经可以互相通信了。

我们再打开chrome调试器，具体看看WebSocket请求，如下：

在RequestHeaders中，”Connection:Upgrade”表示浏览器通知服务器，如果可以就升级为websocket协议。Origin用于验证浏览器域名是否在服务器许可范围内。Sec-WebSocket-Key则用于握手协议密钥，是base64编码的16字节随机字符串。Upgrade头信息表示将通信协议从HTTP/1.1转向该项所指定的协议。

在ResponseHeaders中，”Connection:Upgrade”通知浏览器，需要改变协议。Sec-WebSocket-Accept是服务器在浏览器提供的Sec-WebSocket-Key字符串后面，添加“258EAFA5-E914-47DA-95CA-C5AB0DC85B11” 字符串，然后再取sha-1的hash值。浏览器将对这个值进行验证，以证明确实是目标服务器回应了webSocket请求。

五、拓展阅读

[1]  阮一峰，WebSocket

[2]  Divid Walsh，WebSocket and Socket.IO

[3]  socket.io

[4]  Writing WebSocket client applications

[5]  WebSockets:A Guide

借助node实战WebSocket的更多相关文章

  1. 借助node实战JSONP跨域

    一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限 ...

  2. node.js Websocket实现扫码二维码登录---GoEasy

    最近在做一个扫码登录功能,为此我还在网上搜了一下关于微信的扫描登录的实现方式.当这个功能完成了后,我决定将整个实现思路整理出来,方便自己以后查看也方便其他有类似需求的程序猿些. 要实现扫码登录我们需要 ...

  3. node.js Websocket消息推送---GoEasy

    Goeasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送!个人感觉goeasy推送更稳定,推送 速度快,代码简单易懂上手快 浏览器兼容性:GoEasy推送 支持websocket ...

  4. Node.js+websocket+mongodb实现即时聊天室

    ChatRoom Node.js+websocket+mongodb实现即时聊天室 A,nodejs简介:Node.js是一个可以让javascript运行在服务器端的平台,它可以让javascrip ...

  5. 基于Node.js + WebSocket 的简易聊天室

    代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...

  6. 借助Nodejs探究WebSocket

    文章导读: 一.概述-what's WebSocket? 二.运行在浏览器中的WebSocket客户端+使用ws模块搭建的简单服务器 三.Node中的WebSocket 四.socket.io 五.扩 ...

  7. node.js+websocket实现简易聊天室

    (文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) websocket提供了一种全双工客户端服务器的异步通信方法,这种通信方法使用ws或者wss协议,可 ...

  8. Node.js Websocket 区分不同的用户

    实现ws://serverIP:port/:param1/:param2 .通过param1,param2来管理不同的ws回话,以便实现群发和指定用户的消息推送 npm install ws --sa ...

  9. Node.js+webSocket

    // 引入WebSocket模块 var ws = require('nodejs-websocket') var PORT = 3030 var server = ws.createServer(f ...

随机推荐

  1. _MSC_VER详细介绍

    _MSC_VER详细介绍 转自:http://www.cnblogs.com/braver/articles/2064817.html _MSC_VER是微软的预编译控制. _MSC_VER可以分解为 ...

  2. JavaScript数组去重的几种方法

    这个老问题,网上普遍都有了,为什么要再写一遍呢,主要是为了记个笔记... 遍历时搜索结果数组 思路很明确,如下 新建一个数组存放结果 循环遍历原数组,对于每一个元素,在结果数组中搜索是否存在 若不存在 ...

  3. [WPF] 我的WPF自学日记1，无标题窗体拖动

    学习WPF的第一天,尝试写比较常用的功能,无标题窗体拖动. 先在设计界面给它加上MouseDown事件 <Window x:Class="MyFirstWPFAPP.MainWindo ...

  4. 控制 Android 程序使用的内存

    如何控制应用程序使用的内存? 1. 记得关闭启动的服务 当服务中的任务完成后,要记得停止该服务.可以考虑使用 IntentService,因为 IntentService 在完成任务后会自动停止. 2 ...

  5. CentOS7 编译安装 Mongodb (实测 笔记 Centos 7.0 + Mongodb 2.6.6)

    环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G,双网卡) 系统版本:CentOS-7.0-1406-x86_64-DVD.iso 安装步骤: 1.准备 1.1 显示系统版 ...

  6. java-JDBC从数据库中读取数据并进行日期民族男女的转换

    代码如下: package com.itnba.maya.mysql; import java.sql.*; import java.text.SimpleDateFormat; public cla ...

  7. linux开启FTP以及添加用户配置权限，只允许访问自身目录，不能跳转根目录

    1.切换到root用户 2.查看是否安装vsftp,我这个是已经安装的. [root@localhost vsftpd]# rpm -qa |grep vsftpd vsftpd--.el7_2.x8 ...

  8. *HDU 2451 数学

    Simple Addition Expression Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Ja ...

  9. 利用DOS批处理实现定时关机操作

    10月1放假回来,寝室晚上10:30就停电了,最无法让人理解的是第二天早上8:00才来电.原来晚上电脑都是不关机的,开着WiFi一直到天亮,可是现在不行了,电脑如果一直开着第二天早上起来电脑肯定没电, ...

  10. 实验mongodb使用gridfs存放一个大文件

    1.启动mongoDB 2.使用gridfs存放大文件 3.观察fs.chunks和fs.files的情况 命令 db.fs.chunks.find()查到的是一些二进制文件: