Socket.io官方聊天室DEMO的学习笔记
照着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的学习笔记的更多相关文章
- 使用 Socket.IO 开发聊天室
前言 Socket.IO 是一个用来实现实时双向通信的框架,其本质是基于 WebSocket 技术. 我们首先来聊聊 WebSocket 技术,先设想这么一个场景: · 用户小A,打开了某个网站的充值 ...
- 使用socket.io搭建聊天室
最近在学习nodejs,需要找一些项目练练手.找来找去发现了一个聊天室的教程,足够简单,也能从中学到一些东西.下面记录我练习过程中待一些笔记. nodeJS模块 共用到了2个模块,express和so ...
- node.js + socket.io实现聊天室一
前段时间,公司打算在社区做一个聊天室.决定让我来做.本小白第一次做聊天类功能,当时还想着通过ajax请求来实现.经过经理提示,说试试当前流行的node.js 和socket.io来做.于是就上网学习研 ...
- Socket.io在线聊天室
从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏 ...
- 使用nodejs引用socket.io做聊天室
Server: var app = require('http').createServer(handler) , io = require('socket.io').listen(app) , fs ...
- node express+socket.io实现聊天室
参照网址:https://www.jb51.net/article/135058.htm https://www.cnblogs.com/limitcode/p/7845168.html https: ...
- 我的学习笔记之node----node.js+socket.io实时聊天（1） (谨此纪念博客开篇)
本想着从hello word开篇,也确实写了相关学习笔记.各种原因吧,现在又着急写出作品,便作罢. 这里将记录一个node.js+socket.io的实时聊天程序.(当然我也是跟着网上各种教程资料学习 ...
- 我的学习笔记之node----node.js+socket.io实时聊天（1）
本想着从hello word开篇,也确实写了相关学习笔记.各种原因吧,现在又着急写出作品,便作罢. 这里将记录一个node.js+socket.io的实时聊天程序.(当然我也是跟着网上各种教程资料学习 ...
- 【总结】学习Socket编写的聊天室小程序
1.前言 在学习Socket之前,先来学习点网络相关的知识吧,自己学习过程中的一些总结,Socket是一门很高深的学问,本文只是Socket一些最基础的东西,大神请自觉绕路. 传输协议 TCP:Tra ...
随机推荐
- httpclient调用方法
/** * GET请求 * * @param url * 请求url,参数拼在请求串中 */ public static String get(String url) ...
- 设计一种前端数据延迟加载的jQuery插件(2)
背景 最近看到很多网站都运用到了一种前端数据延迟加载技术,包括淘宝,新浪网等等,这样做的目的可以使得一些未显示的图片随 着滚动条的滚动进行延迟显示. 好处显而易见,可以减少前端对于图片的Http请求, ...
- PHP编码相关函数试题
1.检查字符串在指定的编码里是否有效的函数是什么? 2.获取字符编码的函数是什么? 3.解析 GET/POST/COOKIE 数据并设置全局变量的函数是什么? 4.大小写不敏感地查找字符串在另一个字符 ...
- flex日期合并与拆分
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
- centos6.5安装docker
(一) 查看系统的版本和内核: $cat /etc/issue $uname -r 因为docker要求服务CentOS6以上,kernel 版本必须2.6.32-431或更高 要将Docker安装到 ...
- 得到root,并且获取密码
第一次使用ubuntu的时候 先使用这个命令 sudo passwd root 然后就可以改密码了
- 笨方法学python--打印
1 print 语句 尾端的逗号 end1 = "C" end2 = "h" end3 = "e" end4 = "e" ...
- UVA 11027 - Palindromic Permutation
题目意思为解码字符串,要输出第n个回文字符串,因为对称关系,前一半确定了,后一半也就跟着确定了,所以n其实就是前一半字符串的编码,还要减去1,直接解码出来再复制给后半即可 #include<cs ...
- 重启oracle数据库的一次操作命令和alter日志。
今天重启oracle数据库的命令和alter日志: oracle@NMSSERVER1:~> sqlplus '/as sysdba' SQL*Plus: Release 11.2.0.3.0 ...
- ubuntu 常用命令记录
1.# 表示权限用户(如:root),$ 表示普通用户 开机提示:Login:输入用户名 password:输入口令 用户是系统注册用户成功登陆后,可以进入相应的用户环境. 退出当前shel ...