可行的简略的indexedDB与websocket连用例子

最新推荐文章于 2026-07-06 12:42:15 发布

原创最新推荐文章于 2026-07-06 12:42:15 发布 · 448 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

IndexedDB

本文探讨了WebSocket实现实时通讯及IndexedDB进行离线存储的技术细节。通过具体代码示例，展示了如何利用WebSocket建立实时聊天连接，并使用IndexedDB存储聊天记录，实现断线重连时的数据同步。

inde.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<p>【userId】：
			<div><input id="userId" name="userId" type="text" value="1"></div>
		</p>
		<p>【toUserId】：
			<div><input id="toUserId" name="toUserId" type="text" value="2"></div>
		</p>
		<p>【toUserMessage】：
			<div><input id="contentText" name="message" type="text" value="我是1给的你"></div>
		</p>
		<p>【操作】：
			<div><button type="button" onclick="sendMessage(event)">发送消息</button></div>
			<button type="button" onclick="delet(event)">删除</button>
		</p>
		<button onclick="sd()">测试1</button>
		<button onclick="ceshi_chaxun()">测试2</button>
		<div id="message" style="width: 80%;border: 1px solid;height: auto;"><span style="color: red;">这是全部聊天内容</span></div>
		<div id="messages" style="width: 80%;border: 1px solid;height: auto;"><span style="color: red;">这是我和你的聊天框</span></div>
		<script>
			var db;//全局db
			var chat = [];//查询到的数据存入
			var i = 0;
			var p=[];
			var sqs=[];
		</script>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
		<script type="text/javascript" src="js/a.js"></script>
		<!--<script type="text/javascript" src="js/b.js" ></script>-->
	</body>

</html>

websocket方面的js:

注意你登录人的ID只能退出登录后再手动更改才能变成第二个用户

document.write('<script type="text/javascript" src="js/IndexDB.js" ></script>');
//上面是引入我的indexedDB方面的代码
var websock = null;
console.log(db)
var host = "192.168.2.124:8084/tldollar/websocket/";
var username = '17';
//判断当前浏览器是否支持WebSocket
if('WebSocket' in window) {
	console.log("浏览器支持Websocket")
	var chat_a = new WebSocket('ws://' + host + username);
} else {
	console.log('当前浏览器 Not support websocket')
}

chat_a.onerror = function() {
	console.log("WebSocket连接发生错误")
	setMessageInnerHTML("WebSocket连接发生错误");
};

chat_a.onopen = function() {
	console.log("WebSocket连接成功");
	open();
}
chat_a.onmessage = function(e) {
	console.log("接收到消息的回调方法")
	console.log(JSON.parse(event.data));
	chat.push(JSON.parse(event.data))
	var st = JSON.parse(event.data);
	tianjia(e, db, st);
	console.log(chat)
	var para = document.createElement("p");
//	var node = document.createTextNode('"消息内容："' + chat[i - 1].message + '"接受人："' + chat[i - 1].receiver + '"发送人"' + chat[i - 1].sender + '');
//	para.appendChild(node);
//	var element = document.getElementById("message");
//	element.appendChild(para);
	i = chat.length;
}
chat_a.onclose = function() {
	console.log('关闭连接');
	closeWebSocket();
	closeds();
}
window.onbeforeunload = function() {
	closeWebSocket();
}

//关闭WebSocket连接
function closeWebSocket() {
	chat_a.close();
	closeds();
}

//推送数据
function sendMessage(e) {
	console.log(e)
	if(typeof(WebSocket) == "undefined") {
		console.log("您的浏览器不支持WebSocket");
	} else {
		console.log(db);
		//          console.log('{"to":"'+$("#toUserId").val()+'4","message":"'+$("#contentText").val()+'"}');
		chat_a.send('{"to":"' + $("#toUserId").val() + '","message":"' + $("#contentText").val() + '"}');
		tianjia(e, db, {
			sender: username,
			receiver: $("#toUserId").val(),
			message: $("#contentText").val(),
		});
	}
}
//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
	document.getElementById('message').innerHTML += innerHTML + '<br/>';

}

//删除记录
function delet(e){
	console.log(db);
	var request = db.transaction(["personStore"], "readwrite")
                .objectStore("personStore")
                .delete("917");
request.onsuccess = function(event) {
  // 删除数据成功！
  console.log('成功')
};
}

indexedDB代码

			function open() {
				console.log('打开数据库')
				//				var db; // 全局的indexedDB数据库实例。
				//1\. 获取IDBFactory接口实例（文档地址： https://developer.mozilla.org/en-US/docs/Web/API/IDBFactory）
				var indexedDB =
					window.indexedDB ||
					window.webkitIndexedDB ||
					window.mozIndexedDB ||
					window.msIndexedDB;

				if(!indexedDB) {
					console.log('你的浏览器不支持IndexedDB');
				}
				//2\. 通过IDBFactory接口的open方法打开一个indexedDB的数据库实例
				//第一个参数：设置的数据库名字，第二个参数：数据库版本，返回值是一个IDBRequest实例，这个实例有onerror和onsuccess事件
				var IDBOpenDBRequest = indexedDB.open('demoA', 1);
				//3.现在数据库已经打开成功了（当没有这个数据库时，会创建这个数据库，新建和打开在这是等意）对打开的数据库的事件进行处理。如上面提到的onerror和onsuccess事件
				//打开数据库后，自动调用onsuccess事件回调
				IDBOpenDBRequest.onsuccess = function(e) {
					//一般成功后给db内容
				
					db = e.target.result;
					console.log(e.target.result);
					console.log('成功打开DB');
					read();
					ceshi_chaxun();
					sd();

//					db = e.target.result;
//					console.log(e.target.result);
//					console.log('成功打开DB');
					//					tianjia(e);
					//					read();
					//					xiugai();
					//					deletes();
					//					db.close();
					//					console.log("成功关闭")	
					
					
				};

				//打开数据库失败后的回调
				IDBOpenDBRequest.onerror = function(e) {

				};

				//第一次打开成功后或者版本有变化自动执行下面事件：一般用于初始化数据库。
				IDBOpenDBRequest.onupgradeneeded = function(e) {
					db = e.target.result; //获取到demoA数据库对应的IDBDatabase实例,也就是我们的数据库。
					//用contains方法测试看数据库里面有没有personStore这张表，如果表格不存在，创建一个新的表格（keyPath，主键 ； autoIncrement,是否自增），会返回一个对象（objectStore）
					if(!db.objectStoreNames.contains('personStore')) {
						//// objectStore就相当于数据库中的一张表。IDBObjectStore类型。
						console.log(db)
						var objectStore = db.createObjectStore('personStore', {
							keyPath: 'roomId',
							autoIncrement: false
						});

						//指定可以被索引的字段，unique字段是否是唯一的。类型：IDBIndex
						objectStore.createIndex('receiver', 'receiver', {
							unique: false
						});
						objectStore.createIndex('sender', 'sender', {
							unique: false
						});

						objectStore.createIndex('message', 'message', {
							unique: false
						});
						objectStore.createIndex('shoufa', ['receiver','sender'], {
							unique: false
						});
					};
					//				console.log('数据库版本更改为：'+ dbVersion);				
				}
			}
//测试查询
			function ceshi_chaxun(){
				
				var transaction=db.transaction('personStore','readonly');
				var store=transaction.objectStore('personStore');
				var index = store.index("shoufa");
				var request = index.openCursor(IDBKeyRange.only(["3","17"]));
				  sqs=[];
	            request.onsuccess=function(e){
	            	console.log(request)
	                var cursor=e.target.result;
                if(cursor){
                    var student=cursor.value;
                    sqs.push(student)
                    console.log(student);                  
                    cursor.continue();
                }else{
                	console.log(sqs);
                	console.log(';结束了');
                	return true;
                }
	            }
			}

//查询具体
			function sd() {
				//					open();
				console.log('下面数据库')
				var transaction=db.transaction(['personStore']);
	            var store=transaction.objectStore('personStore');
	            var index = store.index("sender");
	            var request=index.openCursor(IDBKeyRange.only('3'))
	             p=[];
	            request.onsuccess=function(e){
	                var cursor=e.target.result;
                if(cursor){
                    var student=cursor.value;
                    p.push(student)
                    console.log(student);                  
                    cursor.continue();
                  
                }else{
                	console.log(p)
                	return true;
                }
	            }
			}
			//往数据库里建表
			function CreateObjectStore(dbName, storeName) {
				var request = indexedDB.open(dbName);
				request.onsuccess = function(e) {
					var database = e.target.result;
					var version = parseInt(database.version);
					database.close();
					var secondRequest = indexedDB.open(dbName, version + 1);
					secondRequest.onupgradeneeded = function(e) {
						var database = e.target.result;
						var objectStore = database.createObjectStore(storeName, {
							keyPath: 'userid',
							autoIncrement: true
						});
					};
					secondRequest.onsuccess = function(e) {
						e.target.result.close();
					}
				}
			}
			console.log(db) //往数据库里添加
			function tianjia(e, db, sj) {
				console.log('数据')
				console.log(db)
				console.log(sj)
				var transaction = db.transaction(['personStore'], 'readwrite').objectStore('personStore').add(sj);
//					ceshi_chaxun();
//					sd();
				//监听添加成功的事件
				transaction.onsuccess = function(e) {
//					heceng();
					console.log(e.target.result); //打印添加成功后的主键（id）
					console.log('添加成功')
					chat.push(sj)
					i=chat.length;
					var para = document.createElement("p");
					var node = document.createTextNode('"消息内容："' + chat[i-1].message + '"接受人："' + chat[i-1].receiver + '"发送人"' + chat[i-1].sender + '');
					para.appendChild(node);
					var element = document.getElementById("message");
					element.appendChild(para);
					console.log(chat)
				};
				//监听失败的事件
				transaction.onerror = function(e) {
					console.log(e.target.error);
					console.log('错误');
				}
			};
			//数据库的 objectStore 修改
			function xiugai() {
				var transaction = db.transaction(['personStore'], 'readwrite');

				//通过事务来获取IDBObjectStore
				var store = transaction.objectStore('personStore')
				var person = {
					id: 6,
					name: 'lama',
					phone: '515154084',
					address: 'aicoder.com'
				};

				// 修改或者添加数据。 第一参数是要修改的数据，第二个参数是主键（可省略)get方法规定获取哪个匹配元素
				var updatePersonRequest = store.get(5);
				updatePersonRequest.onsuccess = function(e) {
					store.put(person);
					alert("成功")
				};
				// 监听失败事件
				updatePersonRequest.onerror = function(e) {
					console.log(e.target.error);
				};
			};
			//	数据库的 objectStore 删除
			function deletes() {
				var trans_delete = db.transaction(['personStore'], 'readwrite');
				//通过事务来获取IDBObjectStore
				var store = trans_delete.objectStore('personStore');
				//delete找到有6的属性并删除（这指的是id）
				store.delete(5).onsuccess = function(e) {
					console.log('删除成功！')
				};
			}
			//读取数据
			function read() {
				var transaction = db.transaction(['personStore'], "readonly");
				var objectStore = transaction.objectStore('personStore');
				//				console.log(objectStore);
				//4-创建一个游标，和Oracle里面的游标一模一样，类似JAVA里面的容器遍历的iterator()就是一个性能

				var cursor = objectStore.openCursor();
				cursor.onsuccess = function(e) {
					var res = e.target.result;
					console.log('read开始赋值');
					if(res) {
//						console.log(res.value);
						chat.push(res.value);
						//					                console.dir("Data", res.value);
						res.continue();

						//5-continue方法将光标移到下一个数据对象，如果当前数据对象已经是最后一个数据了，则光标指向null。
					} else {
						for(let s = 1; s <= chat.length; s++) {
//							console.log(s)
							var para = document.createElement("p");
							var node = document.createTextNode('"消息内容："' + chat[s-1].message + '"接受人："' + chat[s-1].receiver + '"发送人"' + chat[s-1].sender + '');
							para.appendChild(node);
							var element = document.getElementById("message");
							element.appendChild(para);
						}
						  heceng();
						console.log('read（）结束');
					}

				}
				var request = objectStore.get(3);

				request.onerror = function(event) {
					console.log('事务失败');
				};

				request.onsuccess = function(event) {
					if(request.result) {
						//						console.log(request.result);
						//之后可以放开
					} else {
						console.log('未获得数据记录');
					};
				};
			}
			//关闭数据库
			function closeds() {
				db.close();
			}
			//				CreateObjectStore('demoA','personStores');
			//合并数组
			function heceng(){
				console.log('合并的数组');
				 var c = p.concat(sqs);
//				 alert(Date.parse(c[0].creatTime))
				 c.sort(function(a,b){
		if(Date.parse(a.creatTime)<Date.parse(b.creatTime)){
			return -1;
		}else if(Date.parse(a.creatTime)>Date.parse(b.creatTime)){
			return 1;
		}
		return 0;
	});
				 console.log(c)
				 for(let s = 0; s < c.length; s++) {
//							console.log(s)
							var para = document.createElement("p");
							var node = document.createTextNode('消息内容：' + c[s].message + ',接受人：' + c[s].receiver + ',发送人:' + c[s].sender + '');
							para.appendChild(node);
							var element = document.getElementById("messages");
							element.appendChild(para);
						}
			}

只是简单写的测试。