照着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. 聊一聊PV和并发、以及计算web服务器的数量的方法【转】

    聊一聊PV和并发.以及计算web服务器的数量的方法 站长之家 2016-08-17 09:40 最近和几个朋友,聊到并发和服务器的压力问题.很多朋友,不知道该怎么去计算并发?部署多少台服务器才合适? ...

  2. libevent linux安装

    wget http://monkey.org/~provos/libevent-1.4.13-stable.tar.gzwget http://downloads.sourceforge.net/le ...

  3. drupal7 分页

    $output = ""; $query = db_select('feedback','f')->extend('PagerDefault');//->extend( ...

  4. oracle中to_date详细用法示例(oracle日期格式转换)

    这篇文章主要介绍了oracle中to_date详细用法示例,包括期和字符转换函数用法.字符串和时间互转.求某天是星期几.两个日期间的天数.月份差等用法 TO_DATE格式(以时间:2007-11-02 ...

  5. 创建zend framework 项目要注意的

    1.必须要设置变量环境 我的电脑右击-属性-高级-环境变量 则在环境变量中添加 变量名:PATH 环境值:D:\phpserver\php5.4;D:\ZendFramework\bin 把php.e ...

  6. Objective-C相关Category的收集

    Objective-C相关Category的收集 Categories是给你得不到源码的classes增加功能的一种方法.这个页面收集一些相关的Category,并且持续更新,你可以订阅关注.作者是F ...

  7. [转]程序开发基础学习二（C++ Google Style 命名规则）

    无规矩不成方圆,新的岗位就需要服从团队的编码规则.很开心团队用的是Google的C++编码规则,大概看了下Google 的编码规则,正如九天翔雁说的:“Google的 C++ Style Guide远 ...

  8. monkeyrunner对比屏幕局部图像.getSubImage()

    monkeyrunner对比屏幕局部图像.getSubImage() monkeyrunner执行测试时使用.takeSnapshot()截图,默认截取整个屏幕,包含了系统的状态栏.真实手机状态栏中包 ...

  9. IE6下整站的bug详解

    <1>文字不居中:加一个行高: <2>png文件作为背景不显示: <!--[if IE 6]> <script src="js/DD_belated ...

  10. 《JavaScript高级程序设计》读书笔记 ---变量

    ECMAScript 的变量是松散类型的,所谓松散类型就是可以用来保存任何类型的数据.换句话说,每个变量仅仅是一个用于保存值的占位符而已.定义变量时要使用var 操作符(注意var 是一个关键字),后 ...