码迷,mamicode.com
首页 > Web开发 > 详细

node.js和websocket实现echo

时间:2015-08-28 17:37:19      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:websocket   express   node.js   echo   

    最近在学习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子目录下,和前文中的内容是一样的。)

版权声明:本文为博主原创文章,未经博主允许不得转载。

node.js和websocket实现echo

标签:websocket   express   node.js   echo   

原文地址:http://blog.csdn.net/cqu20093154/article/details/48055081

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!