首頁 > 其他

HTML5 WebSocket之HelloWorld

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

方案

要實現一個WebSocket有很多方案，用戶端方面可以用原生的WebSocket對象，也可以使用類似Socket.IO、jQuery 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的響應等）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More