`

socket, javascript, jquery [转帖]

    博客分类:
  • js
阅读更多
昨天晚上花了一小时,体验了下快速极限编程,使用nodejs express + socket.io + jquery 制作一个极简单的聊天服务器,socket.io果然对于简单而强大 
Shell代码  
zengke:mchat$ date  
Mon Nov 28 22:46:02 CST 2011  
...  
zengke:mchat$ date  
Mon Nov 28 23:40:30 CST 2011  

服务器端代码 node.js 
Javascript代码  
var express = require('express');  
  
var app = express.createServer();  
var io = require('socket.io').listen(app);  
  
app.configure(function () {  
        app.use(express.bodyParser());  
        app.use(express.methodOverride());  
        app.use(express.logger());  
        app.use(express.bodyParser());  
        app.use(express.cookieParser());  
        app.use(express.session({  
                    secret: "skjghskdjfhbqigohqdioukd",  
                        }));  
    });  
  
var conns = {};  
io.sockets.on('connection', function (socket) {  
        var cid = socket.id;  
        for(var ccid in conns) {  
            var soc = conns[ccid];  
            soc.emit('join', {cid: socket.id});  
        }  
        conns[cid] = socket;  
  
        socket.on('disconnect', function () {  
                delete conns[cid];  
                for(var cid in conns) {  
                    var soc = conns[cid];  
                    soc.emit('quit', {cid: cid});  
                }  
            });  
  
        socket.on('say', function (data) {  
                data.cid = cid;  
                for(var ccid in conns) {  
                    var soc = conns[ccid];  
                    soc.emit('broadcast', data);  
                }  
            });  
    });  
app.get('/', function (req, res) {  
        res.sendfile(__dirname + '/public/index.html');  
    });  
app.use('/public', express.static(__dirname + '/public'));  
  
app.listen(3000);  
console.log('daemon start on http://localhost:3000');  


浏览器端javascript 
Javascript代码  
var socket = io.connect("http://localhost");  
  
socket.on('quit', function (data) {  
        status('Client ' + data.cid + ' quits!');  
    });  
  
socket.on('join', function (data) {  
        status('Client ' + data.cid + ' joins!');  
    });  
  
socket.on('broadcast', function (data) {  
        $('#thread').append($('<div>').html('client ' + data.cid + ' says:<br/>' + data.w));  
    });  
  
function say() {  
    var words = $('#text').val();  
    if($.trim(words)) {  
        socket.emit('say', {w: words});  
        $('#text').val('');  
    }  
}  
  
function status(w) {  
    $('#status').html(w);  
}  
  
function initialize() {  
    $(document).delegate('textarea', 'keydown', function (evt) {  
            //console.info(evt.keyCode);  
            if(evt.keyCode == 13 && evt.ctrlKey) {  
                $('#send').focus().click();  
            }  
        });  
}  


页面HTML代码 
Html代码  
<html>  
  <head>  
    <script src="/public/jquery-1.7.min.js"></script>  
    <script src="/socket.io/socket.io.js"></script>  
    <script src="/public/mchat.js"></script>  
    <style type="text/css">  
      #content { width: 600px; margin: 0 auto; }  
      textarea { width: 400px; height: 40px;}  
    </style>  
    <script>  
      $(document).ready(function() {  
         initialize();  
      });  
    </script>  
  </head>  
  <body>  
    <div id="content">  
      <h1>Micro Chat</h1>  
      <div id="status"></div>  
      <div id="thread">  
      </div>  
      <div>  
        <textarea id="text" name="text"></textarea>  
      </div>  
      <div>  
        <button id="send" onclick="say();">Send</button>  
      </div>  
    </div>  
  </body>  
</html>  
分享到:
评论

相关推荐

    通过前端Jquery调用web Socket连接,并返回数据Demo

    标题"通过前端Jquery调用Web Socket连接,并返回数据Demo"主要涉及以下知识点: 1. **JQuery**:JQuery是一个广泛使用的JavaScript库,简化了HTML文档遍历、事件处理、动画和Ajax交互。在本示例中,JQuery可能被...

    JavaScript+jQuery Mobile+Node.js跨平台网页设计附书源码

    JavaScript,jQuery Mobile和Node.js是现代网页开发中的关键技术,它们各自扮演着不同的角色,而将它们结合起来可以创建出强大的、跨平台的网页应用。在这个项目中,我们看到这三个技术的融合,为开发者提供了从桌面...

    JavaScript Socket v1.0.0

    使用此库可以直接在网页上创建 Socket TCP ...迈云 JavaScript Socket 类可以在网页上创建原生Socket,并与服务器端通讯。Socket具有持久、实时的优点,适合IM、聊天室、网络游戏、实时更新、实时推送等等的各个场合。

    常用的js文件,包含jQuery,socket等js文件

    在给定的压缩包“常用js文件大全”中,我们可能找到了一系列广泛使用的JavaScript库和工具,如jQuery和Socket.IO。这些文件对于前端开发者来说极其宝贵,因为他们大大简化了开发过程并提高了效率。 **jQuery** 是一...

    web socket全套资源(jquery+stomp.min.js+sock.min.js)

    在这个资源包中,包含了`jquery.js`、`sockjs.min.js`和`stomp.min.js`这三个关键的JavaScript库,它们共同构成了一个WebSocket通信的完整解决方案。 首先,`jquery.js`是著名的JavaScript库,它简化了DOM操作、...

    js+socket实现web通讯

    在现代Web开发中,为了实现实时双向通信,JavaScript结合Socket技术(通常指的是WebSocket协议)成为一种常见且强大的解决方案。WebSocket是HTML5引入的一个新特性,允许服务器和浏览器之间建立长时间保持连接的通道...

    jSocket是 JavaScript 实现 Socket 通讯的例子

    jSocket是 JavaScript 实现 Socket 通讯的例子,服务端采用VS2010 net4.0开发。 win7已测试通过,整合了很多资料,解决了Flash Socket通信的安全策略问题,连接,发,收信息成功。

    mock-socket, web sockets和 socket.io的Javascript模拟库.zip

    mock-socket, web sockets和 socket.io的Javascript模拟库 的Javascript模拟库, 和 socket.io 安装yarn add mock-socket --dev用法在 node 环境中使用,你可以直接导入或者直接要求文件。 这里选项对于phanto

    js使用socket.rar

    JavaScript中的Socket编程是一种用于在客户端和服务器之间建立实时通信的技术,它基于TCP/IP协议,允许双方进行双向数据传输。在HTML应用中,WebSocket是实现实时交互的重要工具,它弥补了HTTP协议在长连接和实时性...

    Javascript与Flash中的Socket交互

    JavaScript 与 Flash 中的 Socket 交互是网页开发中一种重要的技术,主要用于实现浏览器与服务器之间的低级别通信。在 Flash 中,Socket 类提供了与服务器进行双向数据流通信的能力,而 JavaScript 则可以用来控制 ...

    c#超级Socket库SuperSocket,SOCKET多线程编程

    **SuperSocket库详解** SuperSocket是一款高性能、轻量级的C# Socket服务器开发框架,它为开发者提供了构建基于TCP/IP协议的应用程序的便利工具。在.NET平台上,SuperSocket以其易于扩展和高度定制化的特性,成为了...

    TCP/UDP Socket调试工具(SocketTool) v4

    SocketTool V4.0版本支持JavaScript编程方式,从而增加了灵活性。JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,广泛用于客户端的脚本...

    socket.io,socket.io-client下载

    在客户端,你可以使用`socket.io-client`库,这个库通常用于JavaScript运行环境,如浏览器或React Native等,但也有针对Java和Android的实现,如你提到的`socket.io-client-0.5.0.jar`。 在Java或Android项目中,`...

    socket详解 socket详解 socket详解 socket详解

    Socket 编程详解 在网络编程中,Socket 是一个基本概念, plays a crucial role in building network applications. 在 C# 中,Socket 编程是通过使用 System.Net.Sockets 命名空间中的类和方法来实现的。下面,...

    socket.io.js下载

    socket.io.js是Socket.IO库的核心JavaScript文件,它包含了Socket.IO客户端的所有功能。在网页中引入这个文件,开发者就可以开始使用Socket.IO与服务器进行实时通信。 使用Socket.IO的步骤通常包括以下部分: 1. *...

    jquery-websocket

    标题中的"jquery-websocket"表明我们关注的是如何在JavaScript库jQuery中集成WebSocket技术,用于实现实时双向通信。WebSocket是一种在客户端和服务器之间建立长连接的协议,它允许数据双向传输,极大地提高了网络...

    简单的乒乓球游戏#socket.io #node.js_JavaScript_代码_下载

    标题中的“简单的乒乓球游戏#socket.io #node.js_JavaScript_代码_下载”表明这是一个基于JavaScript、Node.js和Socket.IO的简单乒乓球游戏项目。在这个项目中,开发者利用这些技术创建了一个实时的、多人在线对战的...

    Socket工具SocketTool

    "head.js"和"script.js"可能是工具的JavaScript脚本文件,负责前端界面和交互逻辑;"帮助.lnk"是一个快捷方式,可能指向详细的使用指南或在线帮助文档;"U盘量产网.lnk"可能是关于U盘制作和管理的相关资源链接;...

    一个使用HTML、CSS、JavaScript和Socket.IO库实现的聊天室应用程序的示例代码

    - JavaScript的事件监听机制是关键,如监听键盘事件(如按下Enter键)以触发消息发送,以及监听Socket.IO的连接和断开事件,以处理用户登录和退出。 综上所述,这个示例代码展示了如何使用HTML、CSS和JavaScript...

Global site tag (gtag.js) - Google Analytics