HTML5新特性 websocket(重点)--多对多聊天室

一、html5新特性  websocket(重点)--多对多聊天室

HTTP:超文本传输协议

HTTP作用:传输网页中资源(html;css;js;image;video;..)

HTTP是浏览器搬运工

HTTP 工作方式:请示与响应

浏览器发服务器信息(请求数据)

服务器发数据给浏览器(响应消息)

#一次请求对应一次响应，如果没有请求就没有响应

#金融行业(股票/期货/汇率/...)  多长时间请求一次

新解决方案方式:新协议 websocket

websocket工作方式:广播和收听

适用范围:金融;弹幕;聊天室;客服

二、html5新特性  websocket(重点)--使用

服务器端:node.js  scoket.io 最方便最简单

客户端:浏览器原生对象 websocket功能较少

第三方:socket.io

#socket.io 多对多聊天室

#服务器端  下载第三方模块  (socket.io) 02_socketapp.js

npm i socket.io

#客户端    下载第三方模块  (socket.io) 02_socket.html

https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js

#服务器端程序

(1)创建web 服务器

var app = require("http").createServer();

(2)创建socketio 服务器端对象

var io = require("socket.io")(app)

(3)监听端口

app.listen(3000);

(4)为io对象绑定事件 connection (当客户连接服务器触发此事件)

io.on("connection",(socket)=>{

#console.log("有客户端连接服务器....");

#socket 为当前客户创建专属服务员...

})

#客户端程序

(1)创建socket对象并且连接服务器

var clientSocket = io("ws://127.0.0.1:3000");

#ws: websocket

#127.0.0.1 服务器端程序所有机器地址

#3000     服务器运行端口号

#==========================================

#客户端发送数据给服务器 (一对一)

#socket.io 发送与接收数据采用方式事件绑定与事件触发机制

服务器(收)

socket.on("message",(data)=>{console.log(data);})

客户端(发)

clientSocket.emit("message","初始见面多关照");

#emit:触发指定事件

#==========================================

#服务器发送数据给客户端(一对一)

客户端(收)

clientSocket.on("server",(data)=>{})

服务器(发)

socket.emit("server","发送消息");

#==========================================

#广播消息:服务器向所有客户发送消息

客户端(收)

clientSocket.on("list",(data)=>{})

服务器(发)

io.emit("list","明天开始大降价");

#==========================================

服务器端默认事件:disconnect

#当客户端关闭浏览器默认触发事件(客户端离开了)

三、html5新特性  websocket(重点)--多对多聊天室

server/03_chart_app.js

client/03_chart.html

四、html5 新特性  webStroage

解决问题:在客户端浏览器中保存用户专用数据

作用:登录用户昵称;购物车购物车;...

#注意事项:webStorage 客户端不要存储安全级别高数据

#安全级别高数据 用户密码;uid

客户端存储方式	服务器端存储方式
(不安全;数据量很少)	(安全/海量/高速查询)
(1)cookie 优点:兼容性好 缺点:操作复杂;1kb	(1)数据库
(2)Flash 缺点:依赖flash播放器	(2)session 对象(数据量少)
(3)WebStorage 优点:操作简单;8MB 缺点:兼容性	(3)文件   data.txt
(4)IndexDB 不标准	(4)内存数据库,文档数据库

WebStorage 存储数据依赖二个对象

#sessionStorage

sessionStorage对象存储范围在当前会话中.当前会话中所有网页

都可以使用sessionStorage 保存,但是如果会话结束数据丢失!

注意事项:会话结束(关闭浏览器-关闭标签),退出浏览器生效

#localStorage

此对象保存数据永久保存

WebStorage 操作数据方法与属性以上两个对象通用

(1)保存数据      setItem(key,value);  #key键  value 值

(2)获取数据      var value = getItem(key);

(3)删除指定数据  removeItem(key);

(4)清空所有数据  clear()

(5)数据长度      length