照着Socket.io官方的聊天室代码敲了一遍，遇到了一个奇怪的问题：

每次点击SEND按钮的时候，都会重新刷新页面。

在点击页面的一瞬间，
看到了正在加载jquery的提示，

然后以为是jquery用的官方cdn的问题导致的，

于是把从官方下载了一个jquery文件放到index.html同级目录，

结果在运行的时候死活找不到jquery文件，这个问题有待解决。

后面认认真真的思考了以下，

SEND按钮其实是没有点击事件的，按钮为啥会点击刷新页面了，

BING搜索了一下关键词：button+刷新页面，

发现果然是button的问题，

只要在button的属性里面加上type="button"那么就不会刷新了。

最终，能够正常跑起来的前端代码是这样子的：

 <!doctype html>

 <html>

   <head>

     <title>Socket.IO chat</title>

     <meta charset="UTF-8">

     <style>

       * { margin: 0; padding: 0; box-sizing: border-box; }

       body { font: 13px Helvetica, Arial; }

       form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }

       form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }

       form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }

       #messages { list-style-type: none; margin: 0; padding: 0; }

       #messages li { padding: 5px 10px; }

       #messages li:nth-child(odd) { background: #eee; }

     </style>

   </head>

   <script src="/socket.io/socket.io.js"></script>

   <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

   <script>

     var socket = io();

     $('form').submit(function(){

         socket.emit('message',$('#m').val());

         $('#m').val('');

         return false;

     });

     function sendMsg(){

         console.log('clicked');

         socket.emit('message',$('#m').val());

         $('#m').val('');

     }

     socket.on('connect',function(){

         $('#messages').append($('<li>').text("Connected"));

         socket.on('dmessage', function(msg){

             $('#messages').append($('<li>').text(msg));

         });

     });

   </script>

   <body>

     <ul id="messages"></ul>

     <form action="">

       <input id="m" autocomplete="off" /><button type="button" id="sendbtn" onclick="sendMsg(event)" autopostback="false">Send</button>

     </form>

   </body>

 </html>

index.html

Socket.io官方聊天室DEMO的学习笔记的更多相关文章

  1. 使用 Socket.IO 开发聊天室

    前言 Socket.IO 是一个用来实现实时双向通信的框架,其本质是基于 WebSocket 技术. 我们首先来聊聊 WebSocket 技术,先设想这么一个场景: · 用户小A,打开了某个网站的充值 ...

  2. 使用socket.io搭建聊天室

    最近在学习nodejs,需要找一些项目练练手.找来找去发现了一个聊天室的教程,足够简单,也能从中学到一些东西.下面记录我练习过程中待一些笔记. nodeJS模块 共用到了2个模块,express和so ...

  3. node.js + socket.io实现聊天室一

    前段时间,公司打算在社区做一个聊天室.决定让我来做.本小白第一次做聊天类功能,当时还想着通过ajax请求来实现.经过经理提示,说试试当前流行的node.js 和socket.io来做.于是就上网学习研 ...

  4. Socket.io在线聊天室

    从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏 ...

  5. 使用nodejs引用socket.io做聊天室

    Server: var app = require('http').createServer(handler) , io = require('socket.io').listen(app) , fs ...

  6. node express+socket.io实现聊天室

    参照网址:https://www.jb51.net/article/135058.htm https://www.cnblogs.com/limitcode/p/7845168.html https: ...

  7. 我的学习笔记之node----node.js+socket.io实时聊天（1） (谨此纪念博客开篇)

    本想着从hello word开篇,也确实写了相关学习笔记.各种原因吧,现在又着急写出作品,便作罢. 这里将记录一个node.js+socket.io的实时聊天程序.(当然我也是跟着网上各种教程资料学习 ...

  8. 我的学习笔记之node----node.js+socket.io实时聊天（1）

    本想着从hello word开篇,也确实写了相关学习笔记.各种原因吧,现在又着急写出作品,便作罢. 这里将记录一个node.js+socket.io的实时聊天程序.(当然我也是跟着网上各种教程资料学习 ...

  9. 【总结】学习Socket编写的聊天室小程序

    1.前言 在学习Socket之前,先来学习点网络相关的知识吧,自己学习过程中的一些总结,Socket是一门很高深的学问,本文只是Socket一些最基础的东西,大神请自觉绕路. 传输协议 TCP:Tra ...

随机推荐

  1. 启动apache服务时报错【the requested operation has failed】

    想要解决错误,首先要找到错误的原因. 使用ApacheMonitor.exe启动apache服务看不到任何错误的原因. 找到问题原因:cmd--命令端--切换到apache的bin目录,执行如下命令: ...

  2. perl面向对象

    来源: http://www.cnblogs.com/itech/archive/2012/08/21/2649580.html Perl面向对象     首先让我们来看看有关 Perl 面向对象编程 ...

  3. ant 配置expdp and impap

    + 执行步骤: ant -f 1_exp_prod.xml copy file from prod to uat (maunule) ant -f  3_imp_uat.xml 附件: 1.1_exp ...

  4. slf4j(simple logging facade for java)

    http://www.tuicool.com/articles/IfeUfq   slf4j(simple logging facade for java)是Java的简单的日志门面,它 不是具体的日 ...

  5. Temporary exceptions can be configured via your app's Info.plist file.

    报错: App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure ...

  6. JAVA-面向对象--封装

    1. 如果一个类中没有定义构造函数,会自动加上一个空参的默认构造函数 如果定义了一个构造函数,默认的空参构造函数就没有了. 2. this 当成员变量与局部变量重名的时候,可以使用this来区分.th ...

  7. linux的学习系列 5--环境变量

    在Linux中,环境变量是一个很重要的概念.环境变量可以由系统.用户.Shell以及其他程序来设定. 变量就是一个可以被赋值的字符串,赋值范围包括数字.文本.文件名.设备以及其他类型的数据. 下面的例 ...

  8. Android中如何将Bitmap byte裸数据转换成Bitmap图片int数据

    Android中如何将Bitmap byte裸数据转换成Bitmap图片int数据 2014-06-11 10:45:14   阅读375次 我们在JNI中处理得到的BMP图片Raw数据,我们应该如何 ...

  9. opencv鼠标操作及GUI矩形绘画

    OpenCV的鼠标操作是通过一个中介函数配合回调函数来实现的.指定鼠标操作消息回调函数的函数为SetMouseCallback. void setMouseCallback(const string& ...

  10. lucene特殊字符处理

    这是个郁闷的问题,今天遇到了,但在lucene中查询的关键字保护有特殊字符,譬如--,会出现如下异常: org.apache.lucene.queryParser.ParseException: Ca ...