写实例学习html5 WebSocket

WebSocket简介

WebSocket是html5的重要特性。它是HTML5一种新的协议，实现了浏览器与服务器全双工通信(full-duplex)。使服务器可以主动传送数据给客户端，对构建实时web应用很有用

WebSocket 原理

webSocket 出现的背景及优点：http://zh.wikipedia.org/wiki/WebSocket

原现实现：参考 http://www.cnblogs.com/dxy1982/archive/2012/01/19/2325419.html

WebSocket API 及文档

常用方法：

　　send(data)

事件：

　　onopen

　　onmessage

　　onerror

　　onclose

官方API:http://dev.w3.org/html5/websockets/

WebSocket 实例

实例：“看图猜成语”

业务需求：用户在客户端看图，输入成语，服务器端给出是否猜正确的响应。（下面的例子中输出图的方法省略）

实现环境：用nodejs搭建服务器，与客户端（支持 html5websocket）进行通信。

目的：

1. 了解socket编程的相关知识

2. 了解node 实现socket编程的方法及数据通信

提前准备：

1. 安装nodejs （网上有各自安装教程）

2. 安装nodejs-websocket

npm install nodejs-websocket

代码：

客户端:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>我猜猜</title>

    <link rel="stylesheet" href="http://g.tbcdn.cn/??tb/global/3.2.1/global-min.css,tb/tb-fp/14.7.6/index-e-min.css?t=20141016">

    <script src="http://g.tbcdn.cn/kissy/k/1.4.0/seed-min.js?t=20141016"></script>

    <link rel="stylesheet" href="guess.css"/>

</head>

<body>

<h2 class="header">我猜猜</h2>

<div class="clearfix">

    <section class="mycanvas">

        <h3>画板</h3>

    </section>

</div>

<section class="foot clearfix">

    <div class="btns">

        <!--<label for="">请输入用户名：</label>-->

        <!--<input type="text" id="J_User" value=""/>-->

        <label for="">请输入成语：</label>

        <input type="text" id="J_Word" value=""/>

        <button type="submit" class="next" id="J_Submit">提交</button>

    </div>

    <div class="info" id="J_Message">

        <!--<div class="info-item">msg</div>-->

    </div>

</section>

<script>

    KISSY.use('core',function(S){

        var $ = S.all;

        var btnSubmit = $('#J_Submit'),

            txtWord = $('#J_Word'),

            divMsg = $('#J_Message'),

            //txtUser = $('#J_User'),

            tpl = '<div class="info-item">#msg#</div>';

        var ws = createWs();

        var ident = false;

        btnSubmit.on('click',function(){

            var word = txtWord.val();

            //var user = txtUser.val();

            if(ws){

                if(ident){

                    ws.send(word);

                }

            }

        })

        function createWs(){

            var ws = null;

            if(window.WebSocket){

                ws = new WebSocket('ws://127.0.0.1:5000');

                ws.onopen = function(e){

                    html = tpl.replace(/#msg#/g, "已连接到服务器");

                    divMsg.append(html);

                    ident = true;

                }

                ws.onclose = function(e){

                    html = tpl.replace(/#msg#/g, "服务器关闭");

                    divMsg.append(html);

                }

                ws.onerror = function(){

                    html = tpl.replace(/#msg#/g, "连接出错");

                    divMsg.append(html);

                }

                ws.onmessage = function(e){

                    console.log(e.data);

                    html = tpl.replace(/#msg#/g, e.data);

                    divMsg.append(html);

                }

            }

            return ws;

        }

    })

</script>

</body>

</html>

服务器端：

var ws = require('nodejs-websocket');

console.log('开始建立连接...');

var answer = '闻鸡起舞';

var server = ws.createServer(function(conn){

    conn.on('text',function(str){

        console.log('收到的信息为:'+ str);

        var res ='您输入了'+ str;

        if(str == answer){

            conn.sendText(res +"。 恭喜你，答对了");

        }else{

            conn.sendText(res +"。 呃，错了");

        }

    })

    conn.on("close", function (code, reason) {

        console.log("关闭连接")

    });

    conn.on("error", function (code, reason) {

        console.log("异常关闭")

    });

}).listen(5000);

启动服务器：

打开客户端：

输入文字：服务器返回信息"您输入了闻鸡起舞。恭喜你，答对了"

ok,结束。

我也是在学习过程中，如果大家发现文章中有写的不正确的地方，欢迎各位看客指正。

附：nodejs实现websocket

http://blog.fens.me/nodejs-websocket/

http://www.cnblogs.com/fullhouse/archive/2011/07/18/2109953.html