HTML5 WebSocket之HelloWorld

一直在關注HTML5,之前在幾個生產項目中使用過CSS3,但JavaScript這塊卻一直沒有嘗試過。前幾天突然想做點東西,於是決定挑選一直期望很高的WebSocket來作爲作爲入門。但一頓Google後卻發現少有文章適合初學者入門,要麼只介紹原理,要麼只介紹客戶端實現沒有服務器端,又或者太接近規範太過深奧,遂決定自己寫一篇,一方面鞏固下知識,另一方面也方便後來人。

話不多說,就從Helloworld開始吧。

 

方案

要實現一個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 οnclick="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的響應等)

後記

到此爲止一個簡單的WebSocket的應用就搭建完成了,基於這個例子可以很快擴展出一個簡易聊天室甚至更爲強大的交互應用

好了,時間不早了,朕先睡了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章