照着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. Eclipse 安装 HDFS 插件

    Eclipse 安装 hdfs 连接插件 1.插件安装 在$HADOOP_HOME/contrib/eclipse-plugin/文件夹中有个hadoop-eclipse-plugin-0.20.20 ...

  2. Objective-C语法之NSMutableString字符串的那些事儿

     Objective-C语法之字符串那些事         NSMutableString 类 继承NSString类,那么NSString 提供的方法在NSMutableString中基本都可以使用 ...

  3. offset，client，scroll，style相关笔记

    1.offsetTop 功能:获取元素上外缘与最近的定位父元素内壁的距离,如果没有定位父元素,则是与文档上内壁的距离 使用方法:js document.querySelector(...).offse ...

  4. div里面的margin-top失效

    div标签中的元素margin-top失效的解决方法 元素上级标签是div,已经设置了width和height等的属性,可是,在对元素使用margin进行调整的时候,无法生效,下面有个不错的解决方法, ...

  5. Windows API 之 InternetOpen、InternetOpenUrl、InternetReadFile

    InternetOpen: Initializes an application's use of the WinINet functions. HINTERNET InternetOpen( _In ...

  6. Android中在布局中写ViewPager无法渲染出来的问题

    今天刚刚使用Android Studio,在写ViewPager时,首先按F4把Dependencies添加一个V4包,然后写ViewPager,如下: <android.support.v4. ...

  7. P2P应用中的NAT穿透问题

    多年前曾经写过一个关于NAT钻洞的实验.现在发现那个做法在我现在的路由器上已经不管用了.经过一番搜索发现时过境迁,世界变化很快,新路由器已经是UPnP了.在这里重新理一下几种方法. 第一种,也是不太靠 ...

  8. Pro/TOOLKIT入门教程汇总

    手把手教你开发Pro/TOOLKIT应用程序 手把手教你开发Pro/TOOLKIT应用程序(一) 手把手教你开发Pro/TOOLKIT应用程序(二) 手把手教你开发Pro/TOOLKIT应用程序(三) ...

  9. sphinx分域搜索【不】需要在conf文件中使用sql_field_string

    请看sql_field_string的文档说明: # combined field plus attribute declaration (from a single column) # stores ...

  10. JavaScript判断数组是否存在key

    JS中复合数组associative array和对象是等同的,判断一个key是否存在于数组中(或对象是否包含某个属性),不能使用ary[key] == undefined,因为可能存在ary = { ...