new function() {
var ws = null;
var connected = false; var serverUrl;
var connectionStatus;
var sendMessage; var connectButton;
var disconnectButton;
var sendButton; var open = function() {
var url = serverUrl.val();
ws = new WebSocket(url);
ws.onopen = onOpen;
ws.onclose = onClose;
ws.onmessage = onMessage;
ws.onerror = onError; localStorage.setItem("server", url); connectionStatus.text('OPENING ...');
serverUrl.attr('disabled', 'disabled');
connectButton.hide();
disconnectButton.show();
}; var close = function() {
if (ws) {
console.log('CLOSING ...');
ws.close();
}
connected = false;
connectionStatus.text('CLOSED'); serverUrl.removeAttr('disabled');
connectButton.show();
disconnectButton.hide();
sendMessage.attr('disabled', 'disabled');
sendButton.attr('disabled', 'disabled'); loginName.attr('disabled', 'disabled');
loginPass.attr('disabled', 'disabled');
loginButton.attr('disabled', 'disabled');
}; var clearLog = function() {
$('#messages').html('');
}; var login = function(event) {
var name = loginName.val();
var password = loginPass.val();
if(name!= "" && password != ""){
var msg= "login|"+ name + "|"+ password;
ws.send(msg); localStorage.setItem("name", name);
localStorage.setItem("password", password);
}else{
alert("name and password cant't be empty!")
}
}; var doLogin= function(msg){
if(msg.substr(0, 5)== "login"){
sendMessage.removeAttr('disabled');
sendButton.removeAttr('disabled'); loginName.attr('disabled', 'disabled');
loginPass.attr('disabled', 'disabled');
loginButton.attr('disabled', 'disabled'); return "login success!"
}else if(msg.substr(0, 3)== "msg"){
return msg.substr(4)
}else{
}
return ""
}; var onOpen = function() {
console.log('OPENED: ' + serverUrl.val());
connected = true;
connectionStatus.text('OPENED'); //sendMessage.removeAttr('disabled');
//sendButton.removeAttr('disabled'); loginName.removeAttr('disabled');
loginPass.removeAttr('disabled');
loginButton.removeAttr('disabled');
}; var onClose = function() {
console.log('CLOSED: ' + serverUrl.val());
ws = null;
}; var onMessage = function(event) {
var data = event.data;
//login
data= doLogin(data)
//todo
if(data){
addMessage(data);
//$('#messages').val("");
//getLog();
db.transaction(function (tx) {
tx.executeSql('INSERT INTO LOGS (content) VALUES ("'+ data+ '")');
});
}
}; var onError = function(event) {
alert("error, maybe socket closed!")
//alert(event.data);
}; var addMessage = function(data, type) {
var msg = $('<pre>').text(data);
if (type === 'SENT') {
msg.addClass('sent');
}
var messages = $('#messages');
messages.append(msg);
messages.append($("<br>")); var msgBox = messages.get(0);
while (msgBox.childNodes.length > 10000) {
msgBox.removeChild(msgBox.firstChild);
}
msgBox.scrollTop = msgBox.scrollHeight;
}; var getLog= function(start, limit){
if(typeof(start) == undefined || !start){
start= 0
}
if(typeof(limit) == undefined || !limit){
limit= 10000
}
//log
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS limit ?, ?', [start, limit], function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++){
msg = results.rows.item(i).content;
//document.querySelector('#status').innerHTML += msg;
//alert(msg)
addMessage(msg);
}
}, null);
});
};
WebSocketClient = {
init: function() {
serverUrl = $('#serverUrl');
connectionStatus = $('#connectionStatus');
sendMessage = $('#sendMessage'); connectButton = $('#connectButton');
disconnectButton = $('#disconnectButton');
sendButton = $('#sendButton'); loginName= $('#name');
loginPass= $('#password');
loginButton= $('#loginButton'); if(cache_server!= null)serverUrl.val(cache_server)
if(cache_name!= null)loginName.val(cache_name)
if(cache_password!= null)loginPass.val(cache_password) getLog(); loginButton.click(function(e) {
login();
}); connectButton.click(function(e) {
close();
open();
}); disconnectButton.click(function(e) {
close();
}); sendButton.click(function(e) {
var msg = $('#sendMessage').val();
if(msg== "" ){
alert("You must say something!")
}else{
ws.send("msg|"+ msg);
$('#sendMessage').val("")
}
}); $('#clearMessage').click(function(e) {
clearLog();
}); var isCtrl;
sendMessage.keyup(function (e) {
if(e.which == 17) isCtrl=false;
}).keydown(function (e) {
if(e.which == 17) isCtrl=true;
if(e.which == 13 && isCtrl == true) {
sendButton.click();
return false;
}
});
}
};
} $(function(){
cache_server= localStorage.getItem("server")
cache_name= localStorage.getItem("name")
cache_password= localStorage.getItem("password") db = openDatabase('mydb', '1.0', 'Test DB', 5 * 1024 * 1024); db.transaction(function (tx){
tx.executeSql("CREATE TABLE IF NOT EXISTS LOGS ('id' integer primary key autoincrement,'content' text)");
}); WebSocketClient.init(); });

基于html5 localStorage , web SQL, websocket的简单聊天程序的更多相关文章

  1. websocket实现简单聊天程序

    程序的流程图: 主要代码: 服务端 app.js 先加载所需要的通信模块: var express = require('express'); var app = express(); var htt ...

  2. 基于HTML5移动web应用

    一.基于HTML5移动web应用 1.canvas 绘图 2.多媒体 3.本地存储 4.离线应用 5.使用地理位置 6.移动web框架   二.具体说明 1.HTML5标准最大的变化就是支持Web绘图 ...

  3. Monotype推出基于HTML5的Web字体平台

    著名字体公司Monotype近日宣布推出基于HTML5的Web字体平台,设计者可以访问近10万字体的目录. Monotype推出基于HTML5的Web字体平台 Monotype推出基于HTML5的We ...

  4. localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车

    localStorage.setItem("key","value");//存储变量名为key,值为value的变量 localStorage.key = &q ...

  5. 基于HTML5的Web SCADA工控移动应用

    在电力.油田燃气.供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex.Silverlight甚至Applet这样的重客户端方案,在 ...

  6. 基于HTML5的Web跨设备超声波通信方案

    前言:Chirp在iPhone上掀起了有声传输文件的序幕,我们再也不需要彩信.蓝牙配对.IM来传送数据.它通过“叽叽喳喳”的小鸟叫声来分享数据,简单有趣,而且可以快速的实现一对多的分享. 此外支付宝曾 ...

  7. 阿伦学习html5 之Web SQL Database

    不知道什么情况, W3C不再维护web SQL Database规范,但是大多浏览器都支持了! Web SQL Database规范页面有着这样的声明 Web SQL Database 规范中定义的三 ...

  8. HTML5的Web SQL Database

    本文将介绍 Web SQL Database 规范中定义的三个核心方法: openDatabase:这个方法使用现有数据库或新建数据库来创建数据库对象 transaction:这个方法允许我们根据情况 ...

  9. Android 网络编程基础之简单聊天程序

    前一篇讲了Android的网络编程基础,今天写了一个简单的聊天程序分享一下 首先是服务端代码: package com.jiao.socketdemo; import java.io.Buffered ...

随机推荐

  1. HDU 2673 shǎ崽 OrOrOrOrz

    #include <cstdio> #include <algorithm> using namespace std; int main() { int n; while (s ...

  2. Microsoft Deployment Toolkit 2013 Preview Release Now Available

    MDT 2013 provides a common console with comprehensive tools and guidance for every organizational ro ...

  3. Jedis中的一致性hash

    Jedis中的一致性hash 本文仅供大家参考,不保证正确性,有问题请及时指出 一致性hash就不多说了,网上有很多说的很好的文章,这里说说Jedis中的Shard是如何使用一致性hash的,也为大家 ...

  4. QQ聊天原理初识

    1:qq之间文件的传输是通过p2p通信进行的. 2:qq之间的表情发送实际上就是文字的发送,是client再接受到文字之后在本地自己进行转换 3:qq之间的通信既能够通过udp也能够通过Tcp 尽管u ...

  5. android 中文 api (72) —— BluetoothSocket[蓝牙]

    前言 本章内容是   android.bluetooth.BluetoothSocket,为Android蓝牙部分的章节翻译.蓝牙通讯套接字,代表了与远端设备的连接点,使用socket本地程序可以通过 ...

  6. Connection for controluser as defined in your configuration failed.

    在mysql中使用事件调度器(计划任务), 语句写好了,运行也ok,可是却没有预期的结果.网上总结了非常多计划任务失效的原因.没有一种适合我. 在phpmyadmin中打开事件表,发现以下一串红色的提 ...

  7. Enze frist day

    今天是我来到云和学院正式开班上课的第一天,我选择学习的科目是.net.因为.net我在学校的时候接触过一些,所以我想要更加深入的去学习.我觉得一个学生在学习上最怕的是没有遇到一位负责任的好老师,但幸运 ...

  8. 学习:WordXML格式初步分析

    Office2003以上,Word可以以XML文本格式存储,这样就可以使用外部程序创建Word文件,而不需要使用Word的对象.也能够自由的打开分析Word文件,或者发布到自己的Web页面,或者其他更 ...

  9. 基础算法-查找:线性索引查找(I)

    前面介绍的几种查找的算法都是基于数据有序的基础上进行的.但是在实际的应用中,很多数据集可能有惊人的数据量,面对这些海量的数据,要保证记录全部按照当中的某个关键字有序,其时间代价是非常昂贵的,所以这种数 ...

  10. PHP学习笔记14-操作session

    PHP会话管理图: 创建index: <?php /** * Created by PhpStorm. * User: Administrator * Date: 2015/7/2 * Time ...