短信验证码写法 一般购买厂商都可以找下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./js/jquery.js"></script> </head> <body> 手机号 ：<input id="phone" type="tel"> <button id='btn'>60s倒计时手机验证码</button> <script> // 点击按钮 把手机号 发送ajax 到后台 document.querySelector('#btn').onclick=function(){ let phone=$("#phone").val() $.ajax({ url:"./php/duanxinyanzhengma.php", type:"get", data:{ phone:phone }, success:function(res){ console.log('res',res) } }) } </script> </body> </html>
滑动验证码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>大图模式</title> <style> body { margin: 50px 0; text-align: center; font-family: "PingFangSC-Regular", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif; } .inp { border: 1px solid #cccccc; border-radius: 2px; padding: 0 10px; width: 278px; height: 40px; font-size: 18px; } .btn { display: inline-block; box-sizing: border-box; border: 1px solid #cccccc; border-radius: 2px; width: 100px; height: 40px; line-height: 40px; font-size: 16px; color: #666; cursor: pointer; background: white linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%); } .btn:hover { background: white linear-gradient(0deg, #ffffff 0%, #f3f3f3 100%) } #captcha { width: 300px; display: inline-block; } label { vertical-align: top; display: inline-block; width: 80px; text-align: right; } #text { height: 42px; width: 298px; text-align: center; border-radius: 2px; background-color: #F3F3F3; color: #BBBBBB; font-size: 14px; letter-spacing: 0.1px; line-height: 42px; } #wait { display: none; height: 42px; width: 298px; text-align: center; border-radius: 2px; background-color: #F3F3F3; } .loading { margin: auto; width: 70px; height: 20px; } .loading-dot { float: left; width: 8px; height: 8px; margin: 18px 4px; background: #ccc; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; opacity: 0; -webkit-box-shadow: 0 0 2px black; -moz-box-shadow: 0 0 2px black; -ms-box-shadow: 0 0 2px black; -o-box-shadow: 0 0 2px black; box-shadow: 0 0 2px black; -webkit-animation: loadingFade 1s infinite; -moz-animation: loadingFade 1s infinite; animation: loadingFade 1s infinite; } .loading-dot:nth-child(1) { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; animation-delay: 0s; } .loading-dot:nth-child(2) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s; } .loading-dot:nth-child(3) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s; } .loading-dot:nth-child(4) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; } @-webkit-keyframes loadingFade { 0% { opacity: 0; } 50% { opacity: 0.8; } 100% { opacity: 0; } } @-moz-keyframes loadingFade { 0% { opacity: 0; } 50% { opacity: 0.8; } 100% { opacity: 0; } } @keyframes loadingFade { 0% { opacity: 0; } 50% { opacity: 0.8; } 100% { opacity: 0; } } </style> </head> <body> <h2><a href="./">返回</a></h2> <h1>大图模式</h1> <form id="form"> <div> <label for="username">用户名：</label> <input class="inp" id="username" type="text" value="用户名"> </div> <br> <div> <label for="password">密码：</label> <input class="inp" id="password" type="password" value="123456"> </div> <br> <div> <label>完成验证：</label> <div id="captcha"> <div id="text"> 行为验证™ 安全组件加载中 </div> <div id="wait" class="show"> <div class="loading"> <div class="loading-dot"></div> <div class="loading-dot"></div> <div class="loading-dot"></div> <div class="loading-dot"></div> </div> </div> </div> </div> <br> <div id="btn" class="btn">提交</div> </form> <!-- 注意，验证码本身是不需要 jquery 库，此处使用 jquery 仅为了在 demo 中使用，减少代码量 --> <script src="./js/jquery.js"></script> <!-- 引入 gt.js，既可以使用其中提供的 initGeetest 初始化函数。为防劫持，强烈建议将此文件放在客户服务器！！！--> <script src="js/gt.js"></script> <script> var handler = function (captchaObj) { captchaObj.appendTo('#captcha'); captchaObj.onReady(function () { $("#wait").hide(); }); $('#btn').click(function () { var result = captchaObj.getValidate(); if (!result) { return alert('请完成验证'); } $.ajax({ url: 'gt/validate-click', type: 'POST', dataType: 'json', data: { username: $('#username2').val(), password: $('#password2').val(), geetest_challenge: result.geetest_challenge, geetest_validate: result.geetest_validate, geetest_seccode: result.geetest_seccode }, success: function (data) { if (data.status === 'success') { alert('登录成功'); } else if (data.status === 'fail') { alert('登录失败，请完成验证'); captchaObj.reset(); } } }); }) // 更多前端接口说明请参见：http://docs.geetest.com/install/client/web-front/ }; // 引入 gt.js 发送ajax 去配置 滑动验证码 $.ajax({ url: "http://www.geetest.com/demo/gt/register-click?t=" + (new Date()).getTime(), // 加随机数防止缓存 type: "get", dataType: "json", success: function (data) { $('#text').hide(); $('#wait').show(); // 调用 initGeetest 进行初始化 // 参数1：配置参数 // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口 initGeetest({ // 以下 4 个配置参数为必须，不能缺少 gt: data.gt, challenge: data.challenge, offline: !data.success, // 表示用户后台检测极验服务器是否宕机 new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机 product: "popup", // 产品形式，包括：float，popup "300px", https: true // 更多前端配置参数说明请参见：http://docs.geetest.com/install/client/web-front/ }, handler); } }); </script> </body> </html>
es5与ES6中的class语法
// 构造函数 // function Person(){ // this.name='建林' // this.age=18 // this.say=function(){ // console.log('person的say') // } // } // let p1=new Person() // console.log(p1.name) // p1.say() // class 新es6语法 就是 构造函数的 另一种新写法 语法糖 class Person{ constructor(){ this.name='建林' this.age=18 } say() { console.log('person的say') } } // let p2=new Person() // console.log(p2.name) // p2.say() // class 子 extends 父 { // } class Teacher extends Person{ // // 复杂写法 // constructor(){ // //constructor 在this之前 一定要写super() // super();// 调用 父亲的 constructor // this.name='思聪' // this.score=10000 // } // 简单写法 name='思聪' score=10000 hello(){ console.log('hello') } abc(){ console.log('abc') } } let t1=new Teacher() console.log(t1.name) t1.say()
对async-await的理解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/jquery.js"></script>
</head>
<body>
<button id="btn">点击发送ajax</button>
<script>
// 1 同步 代码从上往下执行 遇见 同步 就会一直等 等到完成 才会继续走
// 异步 代码从上往下执行 遇见异步 就先走了 异步的代码后面执行
// 2 说ajax 问个题
// 哪些是异步 1 定时器 2 ajax 3 事件处理(绑定的onclick等) 4 nodejs 读取文件也有异步
// console.log(1)
// $.ajax({
// url:"./php/ok.php",
// success:function(res){
// // console.log('ajax结果',res)
// console.log(2)
// }
// })
// console.log(3)
// 要求 第一个ajax 成功之后 在 第二个发送ajax 再来第三个....
// 这样写 不一定谁先谁后
// 如果一直嵌套就是 地狱回调
// $.ajax({
// url:"./php/ok.php",
// success:function(res){
// console.log('ajax结果111',res)
// $.ajax({
// url:"./php/ok.php",
// success:function(res){
// console.log('ajax结果2222',res)
// $.ajax({
// url:"./php/ok.php",
// success:function(res){
// console.log('ajax结果2222',res)
// $.ajax({
// url:"./php/ok.php",
// success:function(res){
// console.log('ajax结果2222',res)
// }
// })
// }
// })
// }
// })
// }
// })
// 可以使用promise 解决地狱回调
// let p1=new Promise(function(resolve,reject) {
// // resolve 是成功的函数
// // reject 是失败的函数
// })
// p1 是new的 promise 实例 他有固定写噶
// p1.then(成功的函数resolve,失败的函数reject)
// p1.then(function(){},function(){})
// let p1=new Promise(function(resolve,reject) {
// // let resolve=function(data){
// // console.log('成功',data)
// // }
// // resolve 是成功的函数 // reject 是失败的函数
// resolve(1)
// })
// p1.then(function(data){
// console.log('成功',data)
// })
let p1=new Promise(function(resolve,reject) {
$.ajax({
url:"./php/ok.php",
success:function(res){
// console.log('ajax结果',res)
// console.log(2)
// 成功 调用resolve
resolve(res)
}
})
})
// p1.then
// Promise.all(数组,第二个参数函数)
// Primose.all([p1,p2,p3...],function)
// Primose.all 必须数组里面的所有的 promise执行完毕 才成功
// 用在 要同时 有很多 结果一起成功的 情况
// Primose.race([p1,p2,p3...],function)
// Primose.race 只要 数组里面的 任何一个 成功 整个race就 执行了
// 好处 就是没有那么多嵌套关系 是 一个链式编程的结果
function axios(){
let p1=new Promise(function(resolve,reject) {
$.ajax({
url:"./php/ok.php",
success:function(res){
// console.log('ajax结果',res)
// console.log(2)
// 成功 调用resolve
resolve(res)
}
})
})
return p1
// axios返回一个 promise
}
// axios() 调用axios函数 得到 p1 new的promise
// axios 就是 把 发送ajax 用promise封装了一下
// axios().then(function(res){
// console.log('结果',res)
// })
// 点击 发送ajax
// async await 最简单的使用 就是 可以省略掉then 简单快捷
// 代码看起来清晰
document.getElementById("btn").onclick= async ()=>{
// 使用axios
// axios().then(function(res){
// console.log('结果',res)
// })
let res=await axios();// 这里会等待成功 才执行下面
let res=await axios();// 这里会等待成功 才执行下面
console.log('结果',res)
}
// p1
// .then(function(res){
// console.log('成功的结果',res)
// let p2=new Promise(function(resolve,reject) {
// $.ajax({
// url:"./php/ok.php",
// success:function(res){
// // console.log('ajax结果',res)
// // console.log(2)
// // 成功 调用resolve
// resolve(res)
// }
// })
// })
// return p2
// })
// .then(function(res){
// console.log('成功的结果',res)
// })
// 3 ajax +promise 解决地狱回调 顺便简单封装axios
// 4 async await async/await使得异步代码看起来像同步代码，这正是它的魔力所在
// 5 async +await 原理 generate+yield
// async 函数是什么？一句话，它就是 Generator 函数的语法糖。
// Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。本章详细介绍 Generator 函数的语法和 API，它的异步编程应用请看《Generator 函数的异步应用》一章。
// Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。
// 执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。
// 形式上，Generator 函数是一个普通函数，
// 但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。
// 11:15 上课
// 重点 就一点 async +await 原理 是 generate + yield 的语法糖
// async +await 其实就是 generate + yield 的 写法
// 为什么要有 async +await 因为方便 看起来代码清晰
// Generator方式的函数 里面的代码是 分段执行 看到yield 就给你分一段
function* helloWorldGenerator() {
yield 'hello'; // yield 类似 暂停标记
yield 'world';
return 'ending';
}
var hw = helloWorldGenerator();//hw 返回一个
// console.log(hw);// 这个函数的结果 是 ending吗？不是 因为代码是暂停的 是一个暂停标记 指向hello
console.log(hw.next()) ;//next 表示 拿出这个暂停的值
console.log(hw.next())
console.log(hw.next())
console.log(hw.next())
// 上面代码定义了一个 Generator 函数helloWorldGenerator，它内部有两个yield表达式（hello和world），即该函数有三个状态：hello，world 和 return 语句（结束执行）。
// 然后，Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用 Generator 函数后，
// 该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是遍历器对象（Iterator Object）。
// 下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。
// 也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，
// 直到遇到下一个yield表达式（或return语句）为止。
// 换言之，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。
// 由于 Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。
// Iterator遍历器对象的next方法的运行逻辑如下
// Generator 函数可以返回一系列的值，因为可以有任意多个yield。
// 从另一个角度看，也可以说 Generator 生成了一系列的值，这也就是它的名称的来历（英语中，generator 这个词是“生成器”的意思）。
// console.log(hw.next())
// // { value: 'hello', done: false }
// hw.next()
// // { value: 'world', done: false }
// hw.next()
// // { value: 'ending', done: true }
// hw.next()
// // { value: undefined, done: true }
/*
const fs = require('fs');
const readFile = function (fileName) {
return new Promise(function (resolve, reject) {
fs.readFile(fileName, function(error, data) {
if (error) return reject(error);
resolve(data);
});
});
};
const gen = function* () {
const f1 = yield readFile('/etc/fstab');
const f2 = yield readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
改造
const asyncReadFile = async function () {
const f1 = await readFile('/etc/fstab');
const f2 = await readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
*/
</script>
</body>
</html>
Promise Genarator函数 和async await 的区分以及用法
const fs=require('fs');
//Promise 用法
const getFile=(fileName)=>{
return new Promise((resolve,reject)=>{
fs.readFile(fileName,(err,data)=>{
if(err){
reject(err)
return
}else{
resolve(data)
}
})
})
}
/*
//generator*函数 yield 暂停的意思
function* gen(){
let f1=yield getFile('./server/project1/index.js')
let f2=yield getFile('./server/project1/package.json')
}
//生成 遍历器对象 next() 方法遍历 一次只执行玩当前的这个yield 到下一个yield暂停
let hw=gen();
hw.next().value.then((data)=>{
console.log(data.toString())
})
hw.next().value.then((data)=>{
console.log(data.toString())
})
*/
//用async 和await 写法 （是ganarator函数的语法糖）
async function gen(){
let f1=await getFile('./server/project1/index.js')
let f2=await getFile('./server/project1/package.json')
console.log(f1.toString())
console.log(f2.toString())
}
gen()
JS事件循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> // 凡是 异步代码和定时代码 都会等待 主程序执行完毕 再开始 // 哪些是异步操作 1 定时器延时器 2 ajax 3 绑定的onclick事件函数.. 4 // console.log(1) // setTimeout(function () { // console.log(2); // },0) // console.log(3) // 注意 new promise 会立刻执行 而 .then 是需要异步的 // console.log(1) // new Promise(function(resolve,reject){ // console.log('2') // resolve() // }).then(function(){ // console.log(3) // }) // console.log(4) // 宏任务 ： 定时器延时器 微任务：promise // 先同步 再取出第一个宏任务执行 所有的相关微任务总会在下一个宏任务之前全部执行完毕 // 如果遇见 就 先微后宏 // console.log(1) // setTimeout(function () { // console.log(2); // },0) // new Promise(function (resolve) { // console.log('3'); // resolve(); // }).then(function () { // console.log('4') // }) console.log('1'); // 延时器 放到事件队列里面 宏任务 setTimeout(function () { console.log('2'); new Promise(function (resolve) { console.log('3'); resolve(); }).then(function () { console.log('4') }) },0) // promise new promise立刻执行 但是 then 会放到事件队列 微任务 new Promise(function (resolve) { console.log('5'); resolve(); }).then(function () { console.log('6') }) // 延时器 放到事件队列里面 宏任务 setTimeout(function () { console.log('7'); new Promise(function (resolve) { console.log('8'); resolve(); }).then(function () { console.log('9') }) console.log('10') },0) console.log('11') // 1 5 11 6 2 3 4 7 8 10 9 //1 此时事件队列代码 有一个 then 6 两个 延时器setTimeout //2 先微后宏 执行 then 6 //3 剩下 两个 延时器setTimeout 先上面 再下面 //4 上面的setTimeout 2 3 虽然里面有 then 4 但是记住一个宏任务里面必须会执行完微任务 //5 下面的setTimeout // 1 5 11 6 2 3 4 7 8 10 9 // 第一个setTimeout宏任务结束之后，会去检查队列中是否有微任务存在，如果有的话先执行微任务。（微任务优先级高） // setTimeout(function () { // console.log('7'); // new Promise(function (resolve) { // console.log('8'); // resolve(); // }).then(function () { // console.log('9') // }) // console.log('10') // },0) </script> </body> </html>
cookie
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> // console.log('开始',document.cookie) // document.cookie='username=ljc' // document.cookie='password=123' // console.log('设置') // console.log('获取',document.cookie) // document.cookie="键=值; expires=过期时间" // cookie 后端会操作 但是 前端也可以操作的 document.cookie="username=zs" // 写一次 就多一个cookie document.cookie="age=18" // 获取 console.log( document.cookie ) // 取出来 是一个字符串形式 username=zs; age=18 // 就需要split拆分处理字符串 获取 username 或者age // locastorage sessionstorage cookie // cookie // 1 存的数据量小 2 默认浏览器关掉就过期了 但是可以自己设置过期时间 3 不太安全(每次请求头会带上) // locastorage 1 存的数据量大 2 不过期 除非你删掉 // cookie是很久以前的技术 那时候用来存储用户登录 现在 locastorage 存token来操作 // 注意：cookie 跨域有问题 现在都是 用 locastorage 存token 统一 </script> </body> </html>
ios和安卓判断
// 就涉及到 怎么 判断是 ios还是安卓 // window.navigator.userAgent 原生js 可以拿到 是什么手机系统 // if(是ios){ // // 做ios的 兼容代码 // }esle if(是安卓){ // // 做安卓的代码 // } //获取浏览器的userAgent,并转化为小写 var ua = window.navigator.userAgent.toLowerCase(); /* "Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Mobile Safari/537.36" */ //判断是否是苹果手机，是则是true // 在字符串里面找到 iphone 或者ipad 就是 ios手机 var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1); if(isIos){ // 做苹果手机兼容 console.log('做苹果是','欢迎您 ios 用户') }else{ // 做安卓 console.log('欢迎您 安卓 用户') }
websocket实现聊天室
<!DOCTYPE html>
<html>
<head>
<title>简易聊天Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
html, body {
min-height: 100%;
}
body {
margin: 0;
padding: 0;
100%;
font-family: "Microsoft Yahei", sans-serif, Arial;
}
.container {
text-align: center;
}
.title {
font-size: 16px;
color: rgba(0, 0, 0, 0.3);
position: fixed;
line-height: 30px;
height: 30px;
left: 0px;
right: 0px;
background-color: white;
}
.content {
background-color: #f1f1f1;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
margin-top: 30px;
}
.content .show-area {
text-align: left;
padding-top: 8px;
padding-bottom: 168px;
}
.content .show-area .message {
70%;
padding: 5px;
word-wrap: break-word;
word-break: normal;
}
.content .write-area {
position: fixed;
bottom: 0px;
right: 0px;
left: 0px;
background-color: #f1f1f1;
z-index: 10;
100%;
height: 160px;
border-top: 1px solid #d8d8d8;
}
.content .write-area .send {
position: relative;
top: -28px;
height: 28px;
border-top-left-radius: 55px;
border-top-right-radius: 55px;
}
.content .write-area #name {
position: relative;
top: -20px;
line-height: 28px;
font-size: 13px;
}
</style>
</head>
<body>
<div class="container">
<div class="title">简易聊天demo</div>
<div class="content">
<div class="show-area"></div>
<div class="write-area">
<div>
<button class="btn btn-default send">发送</button>
</div>
<div><input name="name" id="name" type="text" placeholder="input your name"></div>
<div>
<textarea name="message" id="message" cols="38" rows="4" placeholder="input your message..."></textarea>
</div>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
$(function () {
// var wsurl = 'ws://127.0.0.1:3000';
var websocket;
var i = 0;
if (window.WebSocket) {
// 原生js就支持的
// WebSocket 建立链接后 就不会在断 相当于打电话 只要不挂断就一直可以通讯
// 1 前端必须按照步骤写上链接WebSocket 2 后台也需要对应链接上WebSocket
// 对应我们来说 有人封装了 一个 sockect.io 他就是封装 WebSocket
// 1 new WebSocket
websocket = new WebSocket('ws://127.0.0.1:3000');
//2 连接建立 websocket.onopen
websocket.onopen = function (evevt) {
console.log("WebSocket 链接上了");
$('.show-area').append('<p class="bg-info message"><i class="glyphicon glyphicon-info-sign"></i>Connected to WebSocket server!</p>');
}
//3 收到后台发来消息就会执行 websocket.onmessage
websocket.onmessage = function (event) {
// 在这里就 解析判断 后台返回什么数据 对应操作
var msg = JSON.parse(event.data); //解析收到的json消息数据
var type = msg.type; // 消息类型
var umsg = msg.message; //消息文本
var uname = msg.name; //发送人
i++;
if (type == 'usermsg') {
$('.show-area').append('<p class="bg-success message"><i class="glyphicon glyphicon-user"></i><a name="' + i + '"></a><span class="label label-primary">' + uname + ' : </span>' + umsg + '</p>');
}
if (type == 'system') {
$('.show-area').append('<p class="bg-warning message"><a name="' + i + '"></a><i class="glyphicon glyphicon-info-sign"></i>' + umsg + '</p>');
}
$('#message').val('');
window.location.hash = '#' + i;
}
//发生错误 链接出错
websocket.onerror = function (event) {
i++;
console.log("Connected to WebSocket server error");
$('.show-area').append('<p class="bg-danger message"><a name="' + i + '"></a><i class="glyphicon glyphicon-info-sign"></i>Connect to WebSocket server error.</p>');
window.location.hash = '#' + i;
}
//连接关闭 关闭链接
websocket.onclose = function (event) {
i++;
console.log('websocket Connection Closed. ');
$('.show-area').append('<p class="bg-warning message"><a name="' + i + '"></a><i class="glyphicon glyphicon-info-sign"></i>websocket Connection Closed.</p>');
window.location.hash = '#' + i;
}
function send() {
var name = $('#name').val();
var message = $('#message').val();
if (!name) {
alert('请输入用户名!');
return false;
}
if (!message) {
alert('发送消息不能为空!');
return false;
}
var msg = {
message: message,
name: name
};
try {
websocket.send(JSON.stringify(msg));
} catch (ex) {
console.log(ex);
}
}
//按下enter键发送消息
$(window).keydown(function (event) {
if (event.keyCode == 13) {
console.log('user enter');
send();
}
});
//点发送按钮发送消息
$('.send').bind('click', function () {
send();
});
}
else {
alert('该浏览器不支持web socket');
}
});
</script>
</body>
</html>
用封装过后的socket.io（）实现