最近在学习node.js,其中一章讲了WebSocket相关的内容。我看的书是《了不起的node.js》。这本书中实现了一个echo例子,但是我照书上做的程序却出现了错误。书中使用了express和websocket.io实现的这个例子。然而例子的express版本还是古老的2.5.1,最新的已经是4..了,所以出了问题也不奇怪。 
    书中的服务器代码片段大概是这样的:
var express = require(‘express‘)
    , wsio = require("websocket.io")
var app = express.createServer();
var ws = wsio.attach(app);
app.use(express.static(‘public‘));
/* 
*
*/
app.listen(3000);前端代码index.html如下:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>websocket echo</title>
</head>
<body>
<h1>websocket echo</h1>
<h2>latency:<span id="latency"></span>ms</h2>
<script>
    var lastMessage;
    window.onload=function(){
        //create socket
        var ws=new WebSocket(‘ws://127.0.0.1:3000‘);
        ws.onopen=function(){
            //send first ping
            ping();
        };
        console.log("going well!");
        // 监听Socket的关闭
        ws.onclose = function(event) {
            console.log(‘Client notified socket has closed‘,event);
        };
        ws.onmessage=function(ev){
            console.log("got:"+ev.data);
            document.getElementById("latency").innerHTML=new Date-lastMessage;
            ping();
        };
        function ping(){
            lastMessage = new Date;
            ws.send("ping");
        }
    }
</script>
</body>
<html>查了资料才知道新版的express已经没有createServer()这个方法了。然后我参考express 4.x的api文档改程序,也还是解决不了,浏览器显示“Connection closed before receiving a handshake response”。仔细回想一下,还是觉得自己没有理解express,所以就决定先不用express,而是直接用http。
var http = require(‘http‘)
    // use require(‘websocket.io‘) if you installed with NPM
  , wsio = require(‘websocket.io‘)
/**
 * Create HTTP server.
 */
var server = http.createServer(function (req, res) {
  res.writeHead(200, { ‘Content-Type‘: ‘text/html‘ });
  res.end([
  ‘<!DOCTYPE html>‘
    ,‘<html>‘
    /*index.html的内容*/
    ,‘</html>‘   
  ].join(‘‘));
});
var ws = wsio.attach(server);
ws.on(‘connection‘, function (socket) {
    socket.on(‘message‘, function (msg) {
        console.log(‘ \033[96mgot:\033[39m ‘ + msg);
        socket.send(‘pong‘);
    });
});
server.listen(3000);    运行结果是正确的。然而这个正确代码看起来很不舒服,前端代码和服务器代码耦合在一起,长长的字符串数组我都不敢把它们贴上来。而且调试的时候根本看不清楚,所以我还是想用express的静态托管功能。于是继续看express的api。然后看到了: 
var express = require(‘express’); 
var http = require(‘http’); 
var app = express(); 
http.createServer(app).listen(80); 
    原来app其实一个函数,所以可以使用它来创建传统的httpserver。然后我就得到了如下的服务器端代码:
var express = require(‘express‘)
    , wsio = require(‘websocket.io‘)
    , http = require(‘http‘)
var app = express();
app.use(express.static(‘public‘));
var server = http.createServer(app) 
var ws = wsio.attach(server);
ws.on(‘connection‘, function (socket) {
    socket.on(‘message‘, function (msg) {
        console.log(‘ \033[96mgot:\033[39m ‘ + msg);
        socket.send(‘pong‘);
    });
});
server.listen(3000);
运行效果也是正常的(index.html在public子目录下,和前文中的内容是一样的。)
版权声明:本文为博主原创文章,未经博主允许不得转载。
原文:http://blog.csdn.net/cqu20093154/article/details/48055081