照着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. AS3.0中用于网络通信的类总结

      0条评论  1.Loader Loader 类可用于加载 SWF 文件或图像(JPG.PNG 或 GIF)文件.也只能是这些对象. 网络协议基础:HTTP/RTMP 加载方法原型:Loader.l ...

  2. c# office转换成pdf

    下载地址 [url]http://www.microsoft.com/downloads/details.aspx?FamilyId=4D951911-3E7E-4AE6-B059-A2E79ED87 ...

  3. ActionBar更改背景颜色（主题）

    1.默认是黑色的背景, 2.更改主题theme为Theme.AppCompat.Light即可,清单文件主题如下: <application android:name="com.ith ...

  4. PHP xdebug的安装

    xdebug实际上就是PHP的一个第三方扩展 安装xdebug步骤和添加一个PHP扩展一样 linux:去xdebug官网下载对应版本的源码,然后像编译其他linux扩展一样,详解我的一篇关于Linu ...

  5. [QML] Connections元素介绍

    一个Connections对象创建一个了一个QML信号的连接.在QML中,我们连接信号通常是用使用"on<Signal>"来处理的,如下所示: MouseArea { ...

  6. Android ListView 中的checkbox

    Q:ListView + CheckBox 当上下滚动的时候有事会自动选中或取消 A:这个与ListView的缓存机制有关.当你屏幕滚动后,ListView中的item选项视图先检查缓存中是否有视图, ...

  7. photoshop移动工具

    1*移动工具 V  移动图层  若果移动选区相当于剪切 2*

  8. jquery 功能强大的下拉菜单

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...

  9. sqlserver 2008 查看表描述，和表结构

    sp_help sys_user sp_columns   sys_user --表结构 THEN obj.name ELSE '' END AS 表名, col.colorder AS 序号 , c ...

  10. over-float清除浮动++隐藏溢出

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...