zoukankan      html  css  js  c++  java
  • HTML5 WebSocket之HelloWorld

    原文http://fallenlord.blogbus.com/logs/110768932.html

    方案

    要实现一个WebSocket有很多方案,客户端方面可以用原生的WebSocket对象,也可以使用类似Socket.IOjQuery Websocket Plugin这样的封装API,服务器端则可以使用Jetty(Java)、Netty(Java)、mod_pywebsocket(Python&Apache)、nodejs(JavaScript)等

    这里我挑选了客户端Socket.IO+服务器端Socket.IO-node,这样做一方面客户端和服务器端都使用JavaScript,避免有些童鞋因为不了解Java、Python等其他语言而导致学习成本增加,另一方面两端框架均使用Socket.IO也可以避免客户端和服务器端学习两套不同框架而导致的学习成本

    前提条件

    * Linux系统一个(或Mac、Solaris、Cgwin、MingW),用于安装nodejs
    * 支持HTML5浏览器一个(非IE及其内核浏览器均可,建议Chrome)

    安装WebSocket服务器

    1. 安装nodejs

    node.js是近年来较为流行的服务器端JavaScript框架,基于V8引擎开发,本人曾在早期做过其中文文档项目 https://github.com/fallenlord/node_doc_zh_CN
    访问nodejs主页下载最新版本的nodejs,我用的是0.4.3(安装过程以Linux为例,其他平台可以访问https://github.com/joyent/node/wiki/Installation查看安装方法)。然后解压到本地

    $ tar xfz node-v0.4.3.tar.gz
    $ cd node-v0.4.3
    $ ./configure --prefix /home/guolin/tools/node-v0.4.3
    $ make
    $ make install

    如果安装过程出现问题,请确认本地安装有Python 2.4或更高版本,以及libssl-dev包

    2. 安装nodejs管理工具NPM

    NPM是个nodejs插件管理工具,执行下面的语句就能安装NPM

    $ curl http://npmjs.org/install.sh | sh

    3. 安装Socket.IO的nodejs插件

    Socket.IO是个JavaScript框架,包括服务器端和客户端,使用统一的API封装了各种实时连接(如WebSocket、Flash Socket、AJAX长轮询等),使得后端的连接可以对开发人员透明。安装只需要执行下面的命令即可:

    $ npm install socket.io

    开始编码

    服务器端代码

    在服务器上任意目录编辑文件server.js:

    var http = require("http"),
        io = require("socket.io");
     
    // Create HTTP server
    var server = http.createServer(function(request, response) {
        response.writeHead({ "Content-Type": "text/html" });
        response.end("HTML5 WebSocket Demo");
    });
    server.listen(8000, "localhost");
     
    // Wrap HTTP server by socket.io
    var socket = io.listen(server);
    socket.on("connection", function(client) {
        console.log("connected");
     
        client.on("message", function(data) {
            client.send("Hello " + data);
        });
     
        client.on("disconnect", function() {
            console.log("disconnected");
        });
    });

    然后执行:

    /home/guolin/tools/node-v0.4.3/bin/node server.js

    可以看见服务器开始运行,此时访问 http://localhost:8000 如果看见HTML5 WebSocket Demo字样表示服务器启动成功
    注意高亮部分,访问地址必须完全匹配高亮处写入的地址,例如,如果高亮处写的是localhost,且服务器IP地址为192.168.1.2,那么访问localhost将会成功,但访问192.168.1.2将会失败

    客户端代码

    在客户端编辑client.html文件:

    <!DOCTYPE html>
    <html>
        <head>
            <script type="text/javascript" charset="utf-8" src="http://localhost:8000/socket.io/socket.io.js"></script>
            <script type="text/javascript" charset="utf-8">
                var socket = new io.Socket("localhost", { port: 8000 });
                socket.connect();
                socket.on("connect", function(){ 
                    console.log("connected");
                });
                socket.on("message", function(data){ 
                    console.log("received message: " + data);
                    document.getElementById("message").innerHTML = data;
                });
                socket.on("disconnect", function(){ 
                    console.log("disconnected");  
                })
     
                function send() {
                    var name = document.querySelector("input[name=name]").value;
                    console.log("send message: " + name);
                    socket.send(name);
                }
            </script>
        </head>
        <body>
            <label for="name">What's your name:</label>
            <input type="text" id="name" name="name" />
            <button onclick="send()">Send</button>
            <div id="message" style="color: red"></div>
        </body>
    </html>

    完成后直接用浏览器访问此文件(可以从文件系统访问,不要尝试访问 http://localhost:8000/client.html,那总是会显示HTML5 WebSocket Demo字样,因为nodejs自带的HTTP服务器默认不会读取本地文件

    输入你的名字如guolin,点击Send,服务器端将返回Hello guolin并显示在页面上

    整个过程可以通过打开浏览器Console以及观察服务器Console了解到交互过程。同时对于Chrome来说,可以从开发人员工具中的Network栏中清楚的看到WebSocket与服务器端通信过程(如向ws:/协议发送GET请求,并得到一个101 WebSocket Protocol Handshake的响应等)

  • 相关阅读:
    WinForm高级控件--PictureBox控件(图片控件)
    改变GridView中列的宽度
    RabbitMq笔记()
    参数可传可不传
    C# 视频讲解
    <ItemTemp>里写判断语句
    MyEclipse 2017 CI 10 发布(附下载)
    DevExpress v17.2新版亮点—WPF篇(四)
    DevExpress XtraScheduler日程管理控件应用实例(2)-- 深入理解数据存储
    MyEclipse移动开发教程:设置所需配置的iOS应用(三)
  • 原文地址:https://www.cnblogs.com/wangkangluo1/p/2811314.html
Copyright © 2011-2022 走看看