写实例学习--html5 WebSocket

 WebSocket简介

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

WebSocket 原理

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

WebSocket API 及文档

常用方法:
  send(data
事件:
  onopen
  onmessage
  onerror
  onclose 

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
 
 
 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。