HTML5新特性 day_05(8.11)上传头像、webSocket

文件上传经典业务流程 – 上传头像

在注册业务，填写表单的过程中，需要选择头像，上传头像，填写基本信息（用户名、密码等）后，点击注册按钮，完成用户注册。当下次登录时需要看到以前提交的头像图片。

1. 提供注册页面，让用户选择头像，上传头像，填写基本信息。当头像选择完毕后立即上传图片，获取图片的访问链接地址：http://ip:port/upload/touxiang.jpg

2. 当点击注册按钮时，需要整理一个表单，发送post请求，提交注册请求，所需要的参数包含上传头像后的头像访问链接地址，格式如下：

   http://localhost:3000/register     // 注册请求
   需要传递的参数：
   name=zs&pwd=123456&phone=13334563456&url=http://ip:port/upload/touxiang.jpg&email=mail@tedu.cn
   

3. 服务端接受到了注册请求后，解析所有的参数，执行sql语句，将用户信息存入数据表：

   id	name	pwd	phone	url	email
   1	zs	123456	13334563456	http://xxxx	mail@xx

4. 至此，用户注册成功。当用户使用zs：123456登录时，服务端需要返回用户的信息，用户的信息中就包含了上次上传的头像的链接地址，这样浏览器就可以在页面中显示该用户的头像了。

WebSocket

客户端与服务端之间的通信模式

短连接模式

客户端与服务端交互，请求建立连接，连接建立成功后，客户端向服务端发送数据，服务端接收，处理数据，返回结果，而后连接断开。这种通信模式为短连接模式。

优点：及时释放服务端资源，可以让服务端处理更多的客户端的请求。

长连接模式

客户端与服务端交互，请求建立连接，连接建立成功后，客户端向服务端发送数据，服务端接收，处理数据，返回结果，而后保持连接不断开。这种通信模式为长连接模式。

优点：可以实现客户端与服务端双向实时交互。

WebSocket用于实现客户端与服务端之间的长连接交互模型

WebSocket是一种基于长连接模式的全双工的通信协议。若希望在网页中基于websocket实现长连接通信就需要使用websocket技术。

在此推荐一款实现了websocket协议的通信框架：socket.io。

Socket.io

需要基于Socket.io实现以下4个主要功能：

1. 使用socket.io完成网页中的js 与 服务端的nodejs之间websocket连接的建立。
2. 使用socket.io实现让客户端给服务端发消息。
3. 使用socket.io实现让服务端给客户端发消息。
4. 使用socket.io实现服务端给所有客户端群发消息。

使用socket.io完成网页中的js 与 服务端的nodejs之间websocket连接的建立。

1. 服务端代码 （nodejs项目）

   1. 建立一个新的项目。（文件夹：socketserver）

   2. 在项目中，安装所需模块：express、socket.io。

      npm init -y             # 初始化npm项目，生成package.json
      npm install express@4   # 安装express
      npm install socket.io   # 安装socket.io
      

   3. 编写后端主js文件：index.js。用于处理客户端websocket请求。