首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >为什么客户端在节点+快递+ 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

复制
相关文章
自动完成文本框(AutoCompleteTextView)
AutoCompleteTextView控件是Android中实现自动为完成文本框的功能,常常和Adapter搭配使用.
李小白是一只喵
2020/04/24
1.6K0
jQuery实现用户输入自动完成功能
利用jQuery UI中Auto-complete插件实现输入自动完成功能,大家在使用诸如淘宝、京东等电商平台搜索商品时,往往只要输入商品的一些特殊字符,就可以显示出和该字符相近的列表菜单,用户使用鼠标或者键盘方向键就可以快速选择,实现了很好的用户体验。
Sindsun
2019/12/10
1.6K0
jQuery实现用户输入自动完成功能
jQuery 实现富文本的标题自动生成目录
参考文档 JQuery 实现自动生成二级目录 JQuery 点击事件回到页面顶部效果 配置步骤 content 内容的标题要固定某个号,如:h2 设置 content 内容 div 的 id 属性,如:id="yzq-blog-content" 实现的 js 代码 只生成一级目录,指定 h2(效果): <script language="javascript" type="text/javascript"> //生成一级目录索引列表 function GenerateContentList(
卓越笔记
2023/02/18
6230
微信小程序自动完成文本框
wxml:部分 <!--index.wxml--> <view class="textview"> <text class="text">Tip:输入内容后,下方自动显示匹配的结果,点击结果项自
李才哥
2019/07/10
1.8K0
微信小程序自动完成文本框
自动完成文本框AutoCompleteTextView实现快速输入
上一期学习的Spinner的使用,掌握的怎么样?本期一起来学习AutoCompleteTextView的使用。 一、认识AutoCompleteTextView AutoCompleteTextView是自动完成文本框,从EditText派生而出,实际上它也是一个文本编辑框,但它比普通编辑框多了一个功能:当用户输入一定字符之后,自动完成文本框会显示一个下拉菜单,供用户从中选择,当用户选择某个菜单项之后,AutoCompleteTextView按用户选择自动填写该文本框。 AutoCom
分享达人秀
2018/02/05
1.6K0
自动完成文本框AutoCompleteTextView实现快速输入
我怎样用Node.js自动完成工作的[每日前端夜话0x4C]
我们在工作中经常会进行很多繁琐的任务:更新配置文件,复制和粘贴文件,更新 Jira 标签等。
疯狂的技术宅
2019/04/23
1.2K0
我怎样用Node.js自动完成工作的[每日前端夜话0x4C]
jQuery 文本属性值
​ jQuery的文本属性值常见操作有三种:html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。
梨涡浅笑
2022/05/08
3.1K0
jQuery 文本属性值
jQuery的文本属性值常见操作有三种:html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。
清出于兰
2020/10/26
1.8K0
jQuery 文本属性值
jQuery的文本属性值常见操作有三种:html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。
星辰_大海
2020/10/09
2.5K0
jQuery 文本属性值
wxpython显示静态文本
wx作为一个GUI图形界面的模块一定要显示文本。 先显示静态文本吧。 wxpython中wx.StaticText可以显示静态文本。
里克贝斯
2021/05/21
2.4K0
wxpython显示静态文本
jQuery 自动补全
$(function() { // 自动补全 var maxcount = 0;// 表示他最大的值 var thisCount =0;// 初始化他框的位置 $("body").prepend(""); $("#sele").keyup(function(even) { var v = even.which; if (v == 38 || v == 40 || v == 13)// 当点击上下键或者确定键时阻止他传送数据 { return; } var txt =
用户7999227
2021/09/19
1.8K0
jquery easyui菜单树显示
目前做了一个easyui项目需要显示多级菜单,菜单配置到数据库中,因此每级菜单都需要到数据库中取,用了jQuery EasyUI方便多了。
全栈程序员站长
2022/07/15
3.4K0
jQuery Verbose Calendar:显示整年的 jQuery 日历插件
jQuery Verbose Calendar 是一个可以把整年的日历显示在一个页面上的 jQuery 插件,加载之后,它会自动滚到今天的日期处,当你鼠标移动到日期上,可以显示今天星期几。并且这个日历插件支持 Callback 函数,当你点击某个日期的时候,你可以执行一些自定义行为,或者插入任意的 HTML 元素。
Denis
2023/04/15
2K0
jquery定时执行函数_jquery自动提交
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/10/01
2.3K0
jQuery控制控件文本的长度
文章作者:Tyan 博客:noahsnail.com  |  CSDN  |  简书
Tyan
2022/05/09
1.3K0
tkinter -- 文本的多行显示
使用 width 和 heigth 来指定控件的大小,如果指定的大小无法满足文本的要求,
py3study
2018/08/02
5.5K0
SpringMVC+jquery.pagination分页显示
最近在做ES全文搜索,需要做个类似于百度搜索下面分页的组件。 找了很多,最后发现jquery.pagination实现分页很方便。
程裕强
2022/05/06
1.5K0
SpringMVC+jquery.pagination分页显示
【jQuery动画】显示与隐藏效果
在网页开发中,适当地使用动画可以使页面更加美观,进而增强用户体验。jQuery中内置了一系列方法用于实现动画,当这些方法不能满足实际要求时,用户也可以自定义动画。本期我们一起来了解一下显示与隐藏效果吧~
颜颜yan_
2022/12/01
6.8K0
【jQuery动画】显示与隐藏效果
点击加载更多

相似问题

Jquery自动完成突出显示文本

24

运行ajax但不显示结果的jquery自动完成

30

jQuery文本框自动完成未显示

23

jQuery UI自动完成gets有建议,但不显示它们

15

jquery自动完成不显示自动完成列表

20
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

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

洞察 腾讯核心技术

剖析业界实践案例

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