一 功能简述
- 基于websocket
- 基于百度地图
- 实现位置互享
二 百度地图基本使用
- 注册百度账户并且开启百度开发,获得AK码(注意浏览器需要选择浏览器版)
- 使用AK码获得JavaScript , 具体使用方法参考API文档,很简单
以下是简单封装的文档
var _maplink = "https://api.map.baidu.com/api?v=3.0&ak=AK码";
var baidumap;
//生成百度地图调用链接
function addScript() {
//加载js API文件
var script = document.createElement("script");
script.type = "text/javascript";
script.src = _maplink + "&callback=_mapstart";
document.head.appendChild(script);
}
addScript();
//window.onload加载多个函数
function addLoadEvent(func) {
if (document.all) {
window.attachEvent("onload", func); //对于IE
} else {
window.addEventListener("load", func, false); //对于FireFox
}
}
function _mapstart() {
console.log("map api loaded");
}
baidumap = {
map: null,
page_mapid: "container",
centerpoint: "",
longitude: 39.915,
latitude: 116.404,
defaultZoom: 13,
init: function (page_mapid, centerpoint, zoom) {
this.page_mapid = baidumap.errorcheck("isnull", page_mapid) ? "container" : page_mapid;
this.centerpoint = baidumap.errorcheck("isnull", centerpoint) ? "" : centerpoint;
baidumap.errorcheck("ok", "", this.createMap); //加载地图
},
createMap: function () {
baidumap.map = new BMap.Map(baidumap.page_mapid);
if (baidumap.errorcheck("isnull", baidumap.centerpoint)) {
var point = new BMap.Point(baidumap.centerpoint);
baidumap.map.centerAndZoom(point, baidumap.defaultZoom);
} else {
baidumap.map.centerAndZoom(new BMap.Point(baidumap.latitude, baidumap.longitude), baidumap.defaultZoom);
}
},
getCenter: function () {
return this.map.getCenter();
},
setCenter: function () {
if (arguments.length <= 0)
return;
if (typeof arguments[0] === "object") {
this.map.setCenter(arguments[0]);
} else if (arguments.length >= 2) {
this.map.setCenter(new BMap.Point(arguments[0], arguments[1]));
}
},
errorcheck: function (code, obj, callback) {
if ("ok" == code && typeof BMap === "undefined") {
console.log("百度地图未成功加载,正在重新载入 ... ");
baidumap.init();
return false;
} else if ("isnull" == code) {
if (null == obj || typeof BMap === "undefined" || "" == obj || null == obj) {
return false
}
}
if (typeof callback == "undefined") {
return true;
} else {
callback();
}
}
}
//以上是不完全版,会逐渐补全
三 webSocket 基础点
3 . 1 > WebSocket 流程
------ > 1 建立 WebSocket 服务端
------ > 2 客户端 与 服务端 建立连接 === onOpen
------ > ------ > 2 .1 客户端建立到服务器的 TCP 连接
------ > ------ > 2 . 2 请求将该 TCP 连接 用作 websocket
------ > ------ > 3 . 3 服务器收到请求 , 同意该 webSocket 请求
------ > ------ > 3 . 4 客户端确定 , HTTP协议结束 , webScoket 双向通道构建
------ > 3 数据发送 === onMessage
------ > 4 关闭连接 === onClose
3 . 2 > 建立连接详情 ( 此处是建立连接时 HTTP 头信息 )
@ ------ > 发送
GET /spring-websocket-portfolio/portfolio HTTP/1.1
Host: localhost:8080
Upgrade: websocket === 此处使用 Upgrade 头
Connection: Upgrade === 使用 Upgrade 连接
Sec-WebSocket-Key: Uc9l9TMkWGbHFD2qnFHltg==
Sec-WebSocket-Protocol: v10.stomp, v11.stomp
Sec-WebSocket-Version: 13
Origin: http://localhost:8080
@ ------ > 返回
HTTP/1.1 101 Switching Protocols
Upgrade: websocket === 此处切换为 websocket
Connection: Upgrade
Sec-WebSocket-Accept: 1qVdfYHU9hPOl4JYYNXF623Gzn0=
Sec-WebSocket-Protocol: v10.stomp
3 . 3 > 对比 HTTP 请求
? ------ 1 WebSocket 开始于 HTTP 协议 , 且与 HTTP 协议 兼容
? ------ 2 HTTP ( 包括 Rest ) 被 建模为多个URL , 客户端需要与 应用程序 交互 ,需要有URL , 请求 和 回复的类型,通过这些进行 URL 匹配 .
? ------ 3 WebSocket 通常只有一个URL , 所有 应用信息都在该TCP 连接上流动 , 通过事件来驱动 .
? ------ 4 WebSocket 是一种低级传输协议 ,与 HTTP 不同 , 只有 统一语义才能进行路由和消息处理 .
? ------ 5 WebSocket 使用请求标头中的 Sec-WebSocket-Protocol 使用更高级的消息传递协议 ( STOMP )
? ------ 6 限制代理可能会导致WebSocket 被关闭 ( Upgrade 未配置 , 长时间空闲被关闭 )
3 . 4 > 详细代码
//未完待续