专栏首页游戏杂谈基于Node.js的Web Socket

基于Node.js的Web Socket

Node.js就不介绍了(如果你写JavaScript,就应该知道它)

以前看到过很多关于node.js的文章,但一直没有尝试去搭建node.js的环境。这里有一篇文章叫“websocket与node.js的完美结合

看完那篇文章,依旧没有什么头绪,决定还是step by step…

在笔记本上跑东西就是比较吃力(况且还是低配置~),就懒得去开虚拟机了,决定直接用xp。

关于windows下安装node.js,我参考的一这篇文章:在Windows下试验Node.js,搭建环境的步骤:

1、下载、解压

2、测试node.js

我下载该文档存放于D盘的QMDownload中,如图所示:

至于每个目录的文件内容暂时可不用管,重点是能让node.js能正常工作。我弄了一个test.js,然后在dos下进入该目录,测试node.js是否能正常工作。

node.js中的内容为:

console.log("Hello oschina!");

测试:

可以再写个例子:

var http = require('http');  
server = http.createServer(function (req, res) {  
      res.writeHeader(200, {"Content-Type": "text/plain"});  
      res.end("Hello oschina\n");  
})  
server.listen(8000);  
console.log("httpd start @8000");  

环境应该差不多了。下面要开始用node.js写socketServer了

在谷歌里搜索了很多资料,本想基于一位老外写的模块进行测试,发现跑不起来。

他的项目:Basic-Node.js-Websocket-Chat

启动的时候报找不到utils模块,折腾了半天,也没能跑起来,果断放弃了,继续寻找…

后来找到这篇文章:Node.js and HTML5 Web Sockets,在里面找到别人写好的模块:node.ws.js

它的主页有例子,告诉使用者如何使用它的模块。

var sys = require("sys"),
    ws = require("./ws");

  ws.createServer(function (websocket) {
    websocket.addListener("connect", function (resource) { 
      // emitted after handshake
      sys.debug("connect: " + resource);

      // server closes connection after 10s, will also get "close" event
      setTimeout(websocket.end, 10 * 1000); 
    }).addListener("data", function (data) { 
      // handle incoming data
      sys.debug(data);

      // send data to client
      websocket.write("Thanks!");
    }).addListener("close", function () { 
      // emitted when server or client closes connection
      sys.debug("close");
    });
  }).listen(8080);

我下载了ws.js,然后将它放在node.js解压目录下的lib目录中D:\QMDownload\nodejs-0.4.6\lib\ws.js

然后基于这个模块写socket server(socket.js--存放于D:\QMDownload\nodejs-0.4.6目录下):

var sys = require("sys"),
    ws = require("../lib/ws");

var socketPool = [];

var server = ws.createServer(function(socket) {
    
    socket.addListener("connect", function(res) {
        sys.puts("client connected from:" + socket.remoteAddress + "" + res);
        socket.write("welcome\r\n");

        socketPool.push(this);
    });

    socket.addListener("data", function(data) {
        //socket.write(data);

        for (var i = 0, len = socketPool.length; i < len; i++)
        {
            socketPool[i].write(data);
        }
    });

    socket.addListener("close", function() {
        sys.puts("client close!");

        for (var i = 0, len = socketPool.length; i < len; i++)
        {
            if (this == socketPool[i])
            {
                socketPool.splice(i, 1);
                break;
            }
        }
    });

});

server.listen(8082);

在这里我只是加了一个数组(socket池的概念),因为在测试中,我发现socket.write是可以反馈消息给客户端,但只是那个发送消息过来的客户端,如果要想对消息进行广播(broadcast),我尝试着这里去使用,但并不知道这样写是否有问题(暂时忽略吧~ 等以后有精力再仔细研究了)

接下来是前台页面了,这个相对简单一些,逻辑部分并不多,需要解决的事情:

1、判断当前浏览器是否支持:WebSocket

2、使用WebSocket中的几个常用方法:onopen、onclose、onmessage、send处于一下消息

HTML的源码:

<!DOCTYPE html>
<html> 
<head> 
<title>Web Socket Chat</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>   1:     2: <script type="text/javascript">   3:     var ws;   4:     $(document).ready(function () {   5:     6:         if ("WebSocket" in window) {   7:             debug("Browser supports web sockets!", 'success');   8:             connect($('#host').val());   9:             $('#console_send').removeAttr('disabled');  10:         } else {  11:             debug("Browser does not support web sockets", 'error');  12:         };  13:    14:         // function to send data on the web socket  15:         function ws_send(str) {  16:             try {  17:                 ws.send(str);  18:             } catch (err) {  19:                 debug(err, 'error');  20:             }  21:         }  22:    23:         // connect to the specified host  24:         function connect(host) {  25:    26:             debug("Connecting to " + host + " ...");  27:             try {  28:                 ws = new WebSocket(host); // create the web socket  29:             } catch (err) {  30:                 debug(err, 'error');  31:             }  32:             $('#host_connect').attr('disabled', true); // disable the 'reconnect' button  33:    34:             ws.onopen = function () {  35:                 debug("connected... ", 'success'); // we are in! :D  36:             };  37:    38:             ws.onmessage = function (evt) {  39:                 debug(evt.data, 'response'); // we got some data - show it omg!!  40:             };  41:    42:             ws.onclose = function () {  43:                 debug("Socket closed!", 'error'); // the socket was closed (this could be an error or simply that there is no server)  44:                 $('#host_connect').attr('disabled', false); // re-enable the 'reconnect button  45:             };  46:         };  47:    48:         // function to display stuff, the second parameter is the class of the <p> (used for styling)  49:         function debug(msg, type) {  50:             $("#console").append('<p class="' + (type || '') + '">' + msg + '</p>');  51:         };  52:    53:         // the user clicked to 'reconnect' button  54:         $('#host_connect').click(function () {  55:             debug("\n");  56:             connect($('#host').val());  57:         });  58:    59:         // the user clicked the send button  60:         $('#console_send').click(function () {  61:             ws_send($('#console_input').val());  62:         });  63:           64:         $('#console_input').keyup(function (e) {  65:             if(e.keyCode == 13) // enter is pressed  66:                 ws_send($('#console_input').val());  67:         });  68:    69:     });</script> 
 
<style type="text/css"> 
    .error {color: red;}
    .success {color: green;}
    #console_wrapper {background-color: black; color:white;padding:5px;}
    #console p {padding:0;margin:0;}
</style> 
</head> 
 
<body> 
 
<h1>Web Socket Chat</h1> 
 
<div id="server_wrapper"> 
    <p>Server
        <input type="text" name="host" id="host" value="ws://localhost:8082/" /> 
        <input type="submit" name="host_connect" id="host_connect" value="重新连接" /> 
    </p>
</div> 
 
<div id="console_wrapper"> 
    <pre id="console"></pre> 
    <input type="text" name="console_input" id="console_input" value="" /> 
    <input type="submit" name="console_send" id="console_send" value="Send" /> 
</div> 
 
</body> 
 
</html>

如果使用flash进行socket进行连接,那么socket server先要返回一个security policy的字符串(解决安全沙箱的问题)

文章中使用的文件打包下载(包含ws.js、socket.js)>>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript立即调用的函数表达式

    主要参考知乎上这个问题:javascript 匿名函数有哪几种执行方式 长天之云的回答。

    meteoric
  • 命名函数表达式

    好文章,可惜中文译文已经无法访问了。不过在cssrain上找到一篇:www.cssrain.cn/demo/named%20function%20express...

    meteoric
  • 关于seajs

    虽然已经有很长时间没写JavaScript,但很多时候看到一些应用还是会带着好奇心去研究一下。之前是看腾讯的朋友网,它的webchat做的很不错(虽然ff下有b...

    meteoric
  • day65_Lucene学习笔记

    注意由于语言不同分析器的切分规则也不同,本例子使用StandardAnalyzer,它可以对用英文进行分词。 如下是org.apache.lucene.ana...

    黑泽君
  • Product Archive相关的标准function module

    版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons)

    Jerry Wang
  • phpcms v9 常用函数

    常用函数 , 打开include/global.func.php,下面存放一些公共函数 view plaincopy to clipboardprint? fu...

    joshua317
  • 洛谷讲课手稿

    Hello大家好,我是洛谷的HansBug。首先自我介绍下,我现在在北京航空航天大学,计算机科学与技术专业读大二,我参加过2013-2015年的提高组NOIP和...

    HansBug
  • JavaScript立即调用的函数表达式

    主要参考知乎上这个问题:javascript 匿名函数有哪几种执行方式 长天之云的回答。

    meteoric
  • EasyUI使用笔记——Datagrid的高级用法(1)

    接上一篇[EasyUI使用笔记——Datagrid的使用及排序],在footer处有添加、修改和删除这几个操作。

    徐大嘴
  • 微信小程序的生命周期函数

    *** 里面的生命周期 *监听页面加载 onLoad:function(options) { } 常用语发送请求,因为这里的options 会携带参数。

    用户4344670

扫码关注云+社区

领取腾讯云代金券