一、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. （转）Eclipse和MyEclipse安装和使用git(egit)图解笔记

    Eclipse.MyEclipse使用git插件(egit)图解 (转)原文来自:http://www.xuebuyuan.com/446322.html 在开发Java.JavaEE等相关程序时,我 ...

  2. Java调用批处理或可执行文件

    import java.io.BufferedReader; import java.io.InputStreamReader; public class Test { public static v ...

  3. webform 光棒效果，删除操作弹出确定取消窗口

    鼠标移入onmouseover和鼠标移出onmouseout,代码里没大写我这也就不大写了.那首先,我们得获取Class为tr_item里的所有东西,也就是项标签里的数据.然后呢,我们定义一个oldC ...

  4. HttpFox

    HttpFox是Firefox的插件,可以用于HTTP分析. https://addons.mozilla.org/en-US/firefox/addon/httpfox/   安装   1. 打开F ...

  5. sql编程篇 (五) 事务

    计算机中的事务 编辑 概念 事务(Transaction)是访问并可能更新数据库中各种数据项的一个程序执行单元(unit).事务通常由高级数据库操纵语言或编程语言(如SQL,C++或Java)书写的用 ...

  6. js ---- 时间格式

    Js获取当前日期时间及其它操作 var myDate = new Date(); myDate.getYear();        //获取当前年份(2位) myDate.getFullYear(); ...

  7. 工作总结_sql

    今天客户叫导入数据,因为存在特殊字符,快把我给玩死了,,所以请教...总结 sql 数据导入excel  存在特殊字符引起的数据缺失 利用字符方式    :   select  a.OpenID+', ...

  8. 利用SQl对数据库实行数据拆分与组合

    利用SQl对数据库实行数据拆分与组合实现提供以下几种方案: 方法一: WITH CTE AS (SELECT A.Id,A.[Uid],UserName FROM (SELECT A.[id], RE ...

  9. RSA密钥生成与使用

    RSA密钥生成与使用 openssl生成工具链接:http://pan.baidu.com/s/1c0v3UxE 密码:uv48 1. 打开openssl密钥生成软件打开 openssl 文件夹下的  ...

  10. 达梦7的试用 与SQLSERVER的简单技术对比

    达梦7的试用 与SQLSERVER的简单技术对比 达梦数据库公司推出了他们的数据库服务管理平台,可以在该平台使用达梦数据库而无须安装达梦7数据库 地址:http://online.dameng.com ...