照着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. server服务器信息页面添加步骤

    1. 在数据库更新链接 /portal/server/getServerList 2. 写实体类 Server.java 3. 写Server.hbm.xml <?xml version=&qu ...

  2. Codeforces Round #371 (Div. 2) C 大模拟

    http://codeforces.com/contest/714/problem/C 题目大意:有t个询问,每个询问有三种操作 ①加入一个数值为a[i]的数字 ②消除一个数值为a[i]的数字 ③给一 ...

  3. apache启动报错：Cannot load php5apache2_2.dll into server

    错误信息: httpd.exe: Syntax error on line 178 of D:/Program Files/httpd-2.4.20-x64-vc14-r2 /Apache24/con ...

  4. Jquery-获取勾选的checkbox的同级节点数量

    // 获取勾选的标签值得上一个兄弟节点 var groups = []; $('input[name="group_name"]:checked').siblings(" ...

  5. 关于Spring的69个面试问答——终极列表

    本文由 ImportNew - 人晓 翻译自 javacodegeeks.欢迎加入翻译小组.转载请见文末要求. 这篇文章总结了一些关于Spring框架的重要问题,这些问题都是你在面试或笔试过程中可能会 ...

  6. 软件设计模式详解:OCP原则

    看到两篇关于OCP的文章, 纳之. 原文:  http://www.cnblogs.com/muzongyan/archive/2010/08/05/1793454.html http://blog. ...

  7. asp网站中使用百度ueditor教程

    1.根据网站类型及编码选择相应的ueditor版本,如我的网站编码为gb2312,则选择ueditor 1.43 asp gbk版.2.本机IE浏览器应为8.0或以上,8.0以下的ueditor 1. ...

  8. VMI

    在虚拟机外部监控虚拟机内部运行状态的方法被称为虚拟机自省(Virtual Machine Introspection,VMI).VMI允许特权域查看非特权域的运行状态,并能获得被监控虚拟机运行状况相关 ...

  9. 【转】linux grep命令详解

    简介 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具,它 ...

  10. TcpClient 读写流

    TcpClient 读写流 TcpClient tcp = new TcpClient(); tcp.Connect(IPAddress.Parse("192.168.1.161" ...