Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >为什么客户端在节点+快递+ socket.io +翡翠简单应用中断开和重新连接?

为什么客户端在节点+快递+ socket.io +翡翠简单应用中断开和重新连接?
EN

Stack Overflow用户
提问于 2013-09-22 10:38:11
回答 1查看 2.6K关注 0票数 2

我创建了一个简单的应用程序,以尝试集成节点、快递、socket.io和jade。用户在文本字段中输入一些字符串("tool ID"),然后单击submit按钮。该文本被简单地转换为所有大写字母,并将结果附加到页面的结果部分。应自动更新结果,以供其他客户端查看该页。

大部分都能用。但是,问题是,在用户单击页面上的submit按钮提交工具ID之后,节点控制台和浏览器javascript控制台都会显示客户机断开连接,然后重新连接。

对用户来说,结果似乎被正确地更新了一秒。然后,结果在另一个零秒内变为空白。然后重新显示结果。因为我用结果显示用户的会话ID,所以我可以看到会话ID在短时间内更改,而结果为空白。

请注意,如果一个不同的客户机只是在查看页面,而不是以其他方式交互,结果就会顺利地更新(没有结果变为空白的短暂时间),而且该客户端似乎根本没有断开连接。

我不希望当客户端单击表单上的submit按钮时断开和重新连接。有人能告诉我为什么会发生这种事吗?我应该怎么做呢?

我的app.js (服务器)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var express = require('express');
var app = express();
var http = require('http');
var server = http.createServer(app);
io = require('socket.io').listen(server); // without the var, this becomes available to other files like routes.
var path = require('path');
var routes = require('./routes/routes');
var process = require('./routes/process');
var _ = require("underscore");

// all environments
app.set('port', 3097);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
//app.use(express.logger('dev'));
app.use(express.bodyParser()); //Tells server to support JSON, urlencoded, and multipart requests
app.use(express.methodOverride());
app.use(express.cookieParser('i7iir5b76ir857bveklfgf'));
app.use(express.session());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

var toolIDs = [];

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

io.on("connection", function(socket) {
    console.log("Client connected.  Sending Update");

    socket.on("toolsRequest", function() {
        socket.emit('toolsReady', {toolIDs: toolIDs}); //This should go to the client that just connected.
    });

    socket.on("disconnect", function() {
        console.log("Client Disconnected");
    });

    socket.on("toolsUpdate", function(data) {
        processedToolID = process.process(data.toolID);
        toolIDs.push({id: data.id, inputToolID: data.toolID, outputToolID: processedToolID}); 
        io.sockets.emit("toolsUpdated", {toolIDs: toolIDs}); //This should go to all clients
        console.log('Results Updated - notifying all clients');
    });
});

// display main page
app.get('/', routes.home);

server.listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

我的routes.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/*
 * GET home page.
 */

exports.home = function(req, res){
    res.render('home', { title: 'Tool'});
    console.log("Just called route.home");
};

我的home.jade

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
doctype 5
html
    head
        title= title
        link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')
        link(rel='stylesheet', href='/bootstrap/css/bootstrap-responsive.min.css')
        script(src='/socket.io/socket.io.js')
        script(src="http://code.jquery.com/jquery.min.js")
        script(src='/js/index.js')
block content
    #wrapper
    h1 
        a(href='/') TOOL
    #display
        div.row-fluid
            div.inlineBlock
                form#toolForm
                    label Tool ID
                    input(type="text", placeholder="e.g. abc123")#toolID
                    span.help-block You may enter a string.
                    button(class="btn")#submit
                        | Submit
                br
            div.inlineBlock.topAligned
                h2 Results
                br
                div#results
                br

我的index.js (客户端)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function init() {

    /* 
    On client init, try to connect to the socket.IO server.
    */
    var socket = io.connect('http://example.com:3097/');

    //We'll save our session ID in a variable for later
    var sessionID = '';

    //Helper function to update the results  
    function updateResults(toolIDs) {
        $('#results').html('');
        for (var i = 0; i < toolIDs.length; i++) {
            $('#results').append('<span id="' + toolIDs[i].id + '">' + '<b>Creator ID:</b> ' + toolIDs[i].id + ' <b>Your ID:</b> ' + sessionID + ' <b>Input Tool:</b> ' + toolIDs[i].inputToolID + ' <b>Output Tool:</b> ' + toolIDs[i].outputToolID + (toolIDs[i].id === sessionID ? '<b>(You)</b>' : '') + '<br /></span>');
        } 
    }

    /*
    When the client successfully connects to the server, an
    event "connect" is emitted.
    */
    socket.on('connect', function () {
        sessionID = socket.socket.sessionid;
        // Note this appears in the browser Javascript console, not node console
        console.log('You are connected as: ' + sessionID);    
        socket.emit('toolsRequest'); //Request the tools data so we can update results
    });

    socket.on('toolsReady', function(data) {
        updateResults(data.toolIDs);
        console.log('Results have been updated from socket.on.toolsReady');  
    });

    socket.on('toolsUpdated', function (data) {
        updateResults(data.toolIDs);
        console.log('Results updated from socket.on.toolsUpdated');
    });

    /*
    Log an error if unable to connect to server
    */
    socket.on('error', function (reason) {
        console.log('Unable to connect to server', reason);
    });

    function getCitations() {
        var toolID = $('#toolID').val()
        socket.emit('toolsUpdate', {id: sessionID, toolID: toolID});
    }

    $('#submit').on('click', getCitations);
}

$(document).on('ready', init);

当客户机单击submit按钮时,我在节点控制台中看到了如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 debug - websocket writing 5:::{"name":"toolsUpdated","args":[{"toolIDs":[{"id":"5a1dfX2dmxcogYT_11e8","inputToolID":"a123123","outputToolID":"A123123"},{"id":"OIuqao6TsTeddQm111e-","inputToolID":"1abcdefg","outputToolID":"1ABCDEFG"},{"id":"Qr_YQ2ZhQHbDpBlk11e_","inputToolID":"abcdefg","outputToolID":"ABCDEFG"}]}]}
Results Updated - notifying all clients
Just called route.home
   info  - transport end (socket end)
   debug - set close timeout for client Qr_YQ2ZhQHbDpBlk11e_
   debug - cleared close timeout for client Qr_YQ2ZhQHbDpBlk11e_
   debug - cleared heartbeat interval for client Qr_YQ2ZhQHbDpBlk11e_
Client Disconnected
   debug - discarding transport
   debug - served static content /socket.io.js
   debug - client authorized
   info  - handshake authorized 2bPKGgmLdD4fp-vz11fA
   debug - setting request GET /socket.io/1/websocket/2bPKGgmLdD4fp-vz11fA
   debug - set heartbeat interval for client 2bPKGgmLdD4fp-vz11fA
   debug - client authorized for
   debug - websocket writing 1::
Client connected.  Sending Update
   debug - websocket writing 5:::{"name":"toolsReady","args":[{"toolIDs":[{"id":"5a1dfX2dmxcogYT_11e8","inputToolID":"a123123","outputToolID":"A123123"},{"id":"OIuqao6TsTeddQm111e-","inputToolID":"1abcdefg","outputToolID":"1ABCDEFG"},{"id":"Qr_YQ2ZhQHbDpBlk11e_","inputToolID":"abcdefg","outputToolID":"ABCDEFG"}]}]}

谢谢,我很感激你的帮助。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-09-22 11:33:56

提交按钮实际上是重新加载页面,这就是为什么套接字断开,以及为什么您在这么短的时间内看到套接字响应。只需防止提交按钮的默认操作。改变这一点:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('#submit').on('click', getCitations);

类似的东西:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('#submit').click(function(event) {
  event.preventDefault();
  getCitations();
});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18947432

复制
相关文章
JavaScript typeof, null, 和 undefined
JavaScript typeof, null, undefined, valueOf()。
陈不成i
2021/07/16
8760
JavaScript中undefined与null详解
对于undefined和null我一直知道他们有很多区别,也知道一点关于他们的区别,但却不具体系统,因此总结了一下,主要心得如下:
Javanx
2019/09/04
7700
JavaScript中undefined与null详解
JavaScript 的 null 和 undefined 判断
在最开始的时候,JavaScript 通常会被定义为是一个解释型语言。这个语言的特点是不需要编译,直接解释使用。
HoneyMoose
2021/08/17
1.3K0
JavaScript 的 null 和 undefined 判断
React报错之ref返回undefined或null
原文链接:https://bobbyhadz.com/blog/react-ref-returns-undefined-or-null[1]
chuckQu
2022/08/19
1.3K0
Javascript中null和undefined的区别?
null:空值,一般主动赋值才会出现。表示主观上这个变量的值就是空的,比如你去获取蒙奇 D 鸣人的资料,这人不存在,那么返回的值就应该是 null。
IT工作者
2022/01/15
5080
Javascript 中 null和undefined的区别
undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是:
wfaceboss
2019/04/08
7820
null == undefined ?
最近在看《JavaScript高级程序设计》一书,书中讲到相等操作符(==)时说,要比较相等性之前,不能将 null 和 undefined 转换成其他任何值,但要记住 null == undefined 会返回 true 。的确,在ECMAScript规范中也是这样定义的,但我认为这样来理解这件事情,似乎有些浮于表面,网上也有很多关于这个问题的文章,下面我希望从一个全新的角度来分析 null 和 undefined 的区别,从而理解两者为何会相等:
疯狂的技术宅
2019/03/28
2.5K0
null == undefined ?
每天学点JavaScript基础(1)—— null 和 undefined
对null执行typeof操作,结果返回字符串"object" ,null可以认为是一个特殊的对象值,含义是非对象。
CherishTheYouth
2020/08/11
6480
JavaScript中的null和undefined的区别
1、null 表示没有对象,即该处不应该有值,用法如下: 作为函数的参数,表示该函数的参数不是对象; 作为原型链的终点。 2、undefined 表示缺少值,就是此处应该有一个值,但是还没有定义,情况如下: 变量被声明了,但没有赋值时,就等于undefined; 调用函数时,应该提供的参数没有提供,该参数等于undefined; 对象没有赋值的属性,该属性的值为undefined; 函数没有返回值的时,默认返回undefined;
IT工作者
2021/12/31
7730
关于 JavaScript 的 null 和 undefined,判断 null 的真实类型
Undefined 和 Null 是 Javascript 中两种特殊的原始数据类型(Primary Type),它们都只有一个值,分别对应 undefined 和 null ,这两种不同类型的值,即有着不同的语义和场景,但又表现出较为相似的行为:
Krry
2018/09/10
1.6K0
关于 JavaScript 的 null 和 undefined,判断 null 的真实类型
【基础】JavaScript 中 null 和 undefined 的区别?
通过运行代码可以看出null和undefined是相等的,但是当他们做全等比较时,又不等。原因是什么呢?我们再来看下他们的类型:
青年码农
2020/12/17
7780
null 和 undefined
浏览器会弹出窗口显示 undefined。因为对于使用了 var 声明但没有进行初始化定义的变量, 其值默认为 undefined。
Chor
2019/11/08
1.8K0
探索JavaScript中Null和Undefined的深渊
在讨论JavaScript中的原始数据类型时,大多数人都了解基本知识,从String,Number和Boolean开始。这些原语非常简单,可以像您期望的那样起作用。但是,本文将重点介绍称为Null和Undefined的更独特的原始数据类型。是什么使它们相似,不相似以及总体上与众不同。
公众号---人生代码
2021/02/24
7250
undefined vs null
许多编程语言都有一个空值(non-value)null:表示存在一个变量但是没有指向一个对象。
前端柒八九
2022/08/25
1.1K0
JavaScript中null和undefined的比较和区别
根据文章介绍了JavaScript中null和undefined的区别和比较。
林老师带你学编程
2018/01/03
1.1K0
javaScript中is-not-defined,undefined和null的区别
之前没太注意is not defined和undefined有什么区别,每次都是简单的把两者理解为未定义,现在回过头来梳理js基础的时候才发现其中区别还是很鲜明的。 先从单纯的字面意思来理解一下(有道词典):
用户2458785
2018/08/29
1.2K0
【说站】javascript中null和undefined的区别
1、null表示有值,但是是空。undefined语义上就表示根本没有人去设置过这个值,所以就是没有定义。
很酷的站长
2022/11/23
3520
【说站】javascript中null和undefined的区别
javascript当中null和undefined的==和===的比较
例 3.1.3(null和undefined的==和===的比较) <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <script> //马克-to-win:声明变量x /* if a value is not set, its typeof is undefined, its value is undefined, if a value= null, its typeof is object, its value is null,but when you use == to test, they are the same, but when to use === to test, they are not the same,== means as long as value is the same, ok, but === means type also must be equal. */ var x; var z1 = "d"; var y = null; // document.writeln("z1 is"+z1); /*if you cancel commenting out the following statement, it will give the blank page, which means it has error.*/ // document.writeln(zyx); document.writeln(x + " is x"); document.writeln(typeof(x) + " is typeof(x)"); document.writeln(y + " is y"); document.writeln(typeof(y) + " is typeof(y)"); var z = undefined; document.writeln(z + " is z"); document.writeln(typeof(z) + " is typeof(z)"); if (y == undefined) { document.writeln('null and undefined is interchangable'); } if (z1 != null) { document.writeln('z1 != null'); } if (y === undefined) { document.writeln('null and undefined is exactly the same'); } if (x == undefined) { document.writeln('声明变量后默认值为undefined'); } if (x === undefined) { document.writeln('声明变量后默认值为exactly the same as undefined'); } if (x == null) { document.writeln('声明变量后默认值为null'); }
马克java社区
2019/10/05
6090
javascript当中null和undefined的==和===的比较
JavaScript基础:typeof null 为什么返回object
null本身实际上是基本类型,但是Javascript在存储的时候,会将不同的对象在底层存储都使用二进制的方式存储,在Javascript中如果二进制的前三位都为0的话就会被判断为object,null的二进制存储表示形式为全是0,自然前三位也是0,因此执行typeof时会返回”object”。
IT工作者
2022/01/26
3K0
解决 JavaScript 中处理 null 和 undefined 的麻烦事[每日前端夜话0xE6]
许多 JavaScript 开发人员正在为怎么处理可选值头痛。有什么好办法来最大程度地减少由值(可能为 null、undefined或在运行时未初始化)引起的错误?
疯狂的技术宅
2019/11/14
1.3K0

相似问题

带坐标的谷歌地理图?

20

CSS十字光标的颜色

19

带流程图图标的离子项目

11

WPF十字光标的热点是否在十字准线的中间?

10

如何绘制跟随鼠标光标的十字?

23
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文