`

socket, javascript, jquery [转帖]

    博客分类：
  • js
socketjavascriptjquery 
阅读更多 
昨天晚上花了一小时，体验了下快速极限编程，使用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>
分享到：
| 字符串对象转换model对象
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    电子商务之价格优化算法：梯度下降：机器学习在价格优化中的角色.docx

    电子商务之价格优化算法：梯度下降：机器学习在价格优化中的角色.docx

    ToadforOracle与Oracle数据库版本兼容性教程.docx

    ToadforOracle与Oracle数据库版本兼容性教程.docx

    browser360-cn-stable-13.3.1016.4-1-amd64.deb

    360浏览器银河麒麟版 for X86 适配兆芯 / 海光 / intel / AMD CPU

    基于React.js和Material-UI个人作品集网站模板（附源码+说明文档）.zip

    使用React.js构建,提供多种主题可供选择,并且易于定制。该项目旨在帮助开发者和自由职业者创建自己的个性化投资组合。 主要功能点 多种主题可供选择,包括绿色、黑白、蓝色、红色、橙色、紫色、粉色和黄色 易于定制,可以在src/data文件夹中更新个人信息 包含主页、关于、简历、教育、技能、经验、项目、成就、服务、推荐信、博客和联系等多个部分 支持通过Google表单收集联系信息 提供SEO优化建议 支持多种部署方式,如Netlify、Firebase、Heroku和GitHub Pages 技术栈主要 React.js Material-UI Axios React-fast-marquee React-helmet React-icons React-reveal React-router-dom React-router-hash-link React-slick Slick-carousel Validator

    中小型企业财务管理系统 SSM毕业设计 附带论文.zip

    中小型企业财务管理系统 SSM毕业设计 附带论文 启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B

    apsw-3.38.5.post1-cp39-cp39-win_amd64.whl.rar

    python whl离线安装包 pip安装失败可以尝试使用whl离线安装包安装 第一步 下载whl文件，注意需要与python版本配套 python版本号、32位64位、arm或amd64均有区别 第二步 使用pip install XXXXX.whl 命令安装，如果whl路径不在cmd窗口当前目录下，需要带上路径 WHL文件是以Wheel格式保存的Python安装包， Wheel是Python发行版的标准内置包格式。 在本质上是一个压缩包，WHL文件中包含了Python安装的py文件和元数据，以及经过编译的pyd文件， 这样就使得它可以在不具备编译环境的条件下，安装适合自己python版本的库文件。 如果要查看WHL文件的内容，可以把.whl后缀名改成.zip，使用解压软件（如WinRAR、WinZIP）解压打开即可查看。 为什么会用到whl文件来安装python库文件呢？ 在python的使用过程中，我们免不了要经常通过pip来安装自己所需要的包， 大部分的包基本都能正常安装，但是总会遇到有那么一些包因为各种各样的问题导致安装不了的。 这时我们就可以通过尝试去Python安装包大全中（whl包下载）下载whl包来安装解决问题。

    电子商务之价格优化算法：线性回归：价格优化策略实施.docx

    电子商务之价格优化算法：线性回归：价格优化策略实施.docx

    工业数字化转型的关键技术及其应用场景解析

    内容概要：报告详细介绍了企业数字化转型的驱动因素、数字化转型方案分类及其应用场景，重点关注了云计算、超连接、数字孪生、人工智能、分布式账本、增材制造、人机接口、数据共享、工业物联网等关键技术。这些技术不仅支持了企业的运营效率提升和业务模式创新，也为实现更快、更开放、更高效的数字化转型提供了支撑。报告最后提出了企业实施数字化转型的六个步骤。 适合人群：企业高级管理人员、技术人员、咨询顾问，以及对工业数字化转型感兴趣的读者。 使用场景及目标：帮助企业制定和实施数字化转型策略，优化运营模式，提升业务效率，增强市场竞争力。同时，也可作为政府部门、研究机构和行业协会的参考文献。 其他说明：报告中提到的关键技术及其应用场景对企业数字化转型具有重要的指导意义，特别是对于那些希望通过数字化转型实现业务创新和升级的企业。

    基于java的线上选课系统的设计与实现答辩PPT.pptx

    基于java的线上选课系统的设计与实现答辩PPT.pptx

    原版aggdraw-1.3.15-cp311-cp311-win_arm64.whl-下载即用直接pip安装.zip

    安装前的准备 1、安装Python：确保你的计算机上已经安装了Python。你可以在命令行中输入python --version或python3 --version来检查是否已安装以及安装的版本。 个人建议：在anaconda中自建不同python版本的环境，方法如下(其他版本照葫芦画瓢)： 比如创建python3.8环境，anaconda命令终端输入：conda create -n py38 python==3.8 2、安装pip：pip是Python的包管理工具，用于安装和管理Python包。你可以通过输入pip --version或pip3 --version来检查pip是否已安装。 安装WHL安装包 1、打开命令行(或打开anaconda命令行终端)： 在Windows上，你可以搜索“cmd”或“命令提示符”并打开它。 在macOS或Linux上，你可以打开“终端”。 2、cd到whl文件所在目录安装： 使用cd命令导航到你下载的whl文件所在的文件夹。 终端输入：pip install xxx.whl安装即可（xxx.whl指的是csdn下载解压出来的whl） 3、等待安装完成： 命令行会显示安装进度，并在安装完成后返回提示符。 以上是简单安装介绍，小白也能会，简单好用，从此再也不怕下载安装超时问题。 使用过程遇到问题可以私信，我可以帮你解决！ 收起

    电子商务之价格优化算法：贝叶斯定价：贝叶斯网络在电子商务定价中的应用.docx

    电子商务之价格优化算法：贝叶斯定价：贝叶斯网络在电子商务定价中的应用.docx

    IMG_20241105_235746.jpg

    IMG_20241105_235746.jpg

    基于java的毕业设计选题系统答辩PPT.pptx

    基于java的毕业设计选题系统答辩PPT.pptx

    专升本考试资料全套.7z

    专升本考试资料全套.7z

    Trustwave DbProtect：数据库活动监控策略制定.docx

    Trustwave DbProtect：数据库活动监控策略制定.docx

    VB程序实例-CD-ROM开关.zip

    基于VB的程序实例，可供参考学习使用

    课设毕设基于SpringBoot+Vue的教育资源共享平台源码可运行.zip

    本压缩包资源说明，你现在往下拉可以看到压缩包内容目录 我是批量上传的基于SpringBoot+Vue的项目，所以描述都一样；有源码有数据库脚本，系统都是测试过可运行的，看文件名即可区分项目~ ｜Java｜SpringBoot｜Vue｜前后端分离｜ 开发语言：Java 框架：SpringBoot，Vue JDK版本：JDK1.8 数据库：MySQL 5.7+（推荐5.7，8.0也可以） 数据库工具：Navicat 开发软件： idea/eclipse（推荐idea） Maven包：Maven3.3.9+ 系统环境：Windows/Mac

    基于Thinkphp5框架的Java插件设计源码

    该源码项目是一款基于Thinkphp5框架的Java插件设计，包含114个文件，其中Java源文件60个，PNG图片32个，XML配置文件7个，GIF图片7个，Git忽略文件1个，LICENSE文件1个，Markdown文件1个，Xmind文件1个，Idea项目文件1个，以及JAR文件1个。

    数据库开发和管理最佳实践.pdf

    数据库开发和管理最佳实践.pdf

    课设毕设基于SpringBoot+Vue的农场投入品运营线上管理系统源码可运行.zip

    本压缩包资源说明，你现在往下拉可以看到压缩包内容目录 我是批量上传的基于SpringBoot+Vue的项目，所以描述都一样；有源码有数据库脚本，系统都是测试过可运行的，看文件名即可区分项目~ ｜Java｜SpringBoot｜Vue｜前后端分离｜ 开发语言：Java 框架：SpringBoot，Vue JDK版本：JDK1.8 数据库：MySQL 5.7+（推荐5.7，8.0也可以） 数据库工具：Navicat 开发软件： idea/eclipse（推荐idea） Maven包：Maven3.3.9+ 系统环境：Windows/Mac

Magicbox
Global site tag (gtag.js) - Google Analytics