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请求。

      const express = require('express');
      const app = express();
      const http = require('http');
      const server = http.createServer(app);
      const { Server } = require("socket.io");
      const io = new Server(server);
      
      // io.on() 用于监听websocket事件   connection为连接建立成功事件
      // 一旦客户端向服务端发送请求建立连接，连接建立成功后将触发该事件，
      // 将立即执行第二个参数：回调方法
      io.on('connection', (socket) => {
        console.log('a user connected');
      });
      
      server.listen(3000, () => {
        console.log('listening on *:3000');
      });
      

2. 客户端代码（socket.html）

   1. 新建socket.html文件。

   2. 在html中引入socket.io.js，编写代码向服务端建立连接。

      <script src="/socket.io/socket.io.js"></script>
      <script>
        io()方法用于向服务端申请建立websocket连接    
        var socket = io('http://localhost:3000');
      </script>
      

使用socket.io实现让客户端给服务端发消息。

1. 客户端发消息

   var socket = io('http://localhost:3000');
   // emit('类型', '内容')用于发消息,两个参数
   socket.emit('textmsg', '你瞅啥？！')
   

2. 服务端接收消息

   io.on('connection', (socket) => {
     // 连接建立成功将会获取与客户端通信时所需要使用的socket对象 
     // 监听textmsg类型的消息，一旦接收到则执行回调方法处理该消息内容
     socket.on('textmsg', function(data){
        
     })
   });
   

使用socket.io实现让服务端给客户端发消息。

1. 服务端发送消息

   io.on('connection', (socket) => {
     // emit()用于给客户端发消息
     socket.emit('textmsg', '瞅你咋地！~')
   });
   

2. 客户端接收消息

   var socket = io('http://localhost:3000');
   socket.on('textmsg', function(data){
       alert(data)
   })
   

使用socket.io实现服务端给所有客户端群发消息。

io.on('connection', (socket) => {
  // emit()用于给客户端发消息
  io.emit('textmsg', '瞅你咋地！~')
});

群聊天室

1. 完成客户端与服务端之间websocket连接的建立。

2. 实现群聊业务。

   在文本框中输入内容，点击发表按钮。给服务端发消息。

   服务端接收到消息后，给所有客户端群发一下这一条消息即可。

3. 实时更新聊天室的在线人数。无论任何人进入聊天室或从聊天室退出，都需要更新所有客户端的当前在线人数的数量。

   1. 在服务端设计一个变量：count用于保存当前在线人数。默认为0。
   2. 每当有客户端进入聊天室（连接成功），count++
   3. 每当有客户端退出聊天室（连接断开），count–
   4. 每当有客户端进入聊天室、退出聊天室时，不仅要更新count，还需要把count的值给所有在线客户端发一遍。
   5. 客户端接收了当前在线人数后，更新span。

4. 发消息时保留用户状态。每个消息都需要说明消息的归属人（带头像、带昵称）。

   1. 当发消息时，不仅需要发送消息内容，还需要发送个人昵称与头像图片路径。

      socket.emit('textmsg', '内容')
      socket.emit('textmsg', {
          text: '内容',
          nickname: '老王',
          avatar: '1.jpg'
      })
      

   2. 服务端接收到的消息将是一个完整的对象，二话不说，将这个对象给所有客户端群发了一遍。

   3. 每个客户端接收到的消息都是一个对象：{text, nickname, avatar}，这样就可以显示发送者的相关信息。