一、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. C# 对多个文件进行zip压缩

    本文使用的ICSharpCode.SharpZipLib.dll类库来实现文件压缩,你可以通过Nuget来安装此类库,或者到搜索引擎去搜索一下遍地都是.类库下载下来之后,添加到项目引用就可以了.下面这 ...

  2. cocoapods安装及使用

    最近新换了电脑,重新安装cocoapods遇到了很多问题,在这里把问题还有解决方案记录一下 一.安装Cocoapods 在安装CocoaPods之前,首先要在本地安装好Ruby环境,一般Mac下都自带 ...

  3. window.onload和$(document).ready(function(){})的区别

    前段时间在面试之前查找并整理了一下window.onload和$(document).ready(function(){})区别,今天有时间更到我的博客上,由于本人资历尚浅,如有不对的地方,还请指正. ...

  4. MongoDB和Redis-NoSQL数据库-文档型-内存型

    1NoSQL简述 CAP(Consistency,Availabiity,Partitiontolerance)理论告诉我们,一个分布式系统不可能满足一致性,可用性和分区容错性这三个需求,最多只能同时 ...

  5. <十>JDBC_处理Blob类型数据

    /*  * 读取BLOB数据:  *  使用getBlob方法读取到Blob对象  *  调用Blob的getBinaryStream(方法得到输入流,在使用IO操作  * */ @Test publ ...

  6. CharSequence cannot be resolved. It is indirectly referenced from required .class files

    最近在写项目的时候发现会莫名其妙的出现这个编译错误,网上查了下发现自己安装的是JDK1.8造成的 原因:JDK1.8版本现在还不稳定 解决方法:卸载JDK1.8,安装JDK1.7 扩展:发现安装JDK ...

  7. 微信小程序demo汇总

    wechat-app-music fenda-mock Wa-UI wx-query weapp-artand WeiXin-SmallApps-Information weapp-wechat-zh ...

  8. Android+jsp +html 文件上传案例 已测试 成功通过

    我文件上传一直是广大读者一个问题 今天就把成功案例写下 javaweb 网页前段 <%@ page language="java" import="java.uti ...

  9. Webpack教程

    打开链接:Webpack教程

  10. UWP中重用C/C++代码时踩过的一些坑

    标题中提到的UWP,主要是指用C#来写UWP的主工程,开发过程中可能需要调用C/C++实现的库. 为什么需要调用C/C++的库呢,举个例子,开源库OpenSSL实现了许多加密算法,稳定快速,我们想在应 ...