写实例学习--html5 WebSocket

浏览数：34 / 时间：2015年06月09日

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);