一、文件上传经典业务流程 -- 上传头像
在注册业务，填写表单的过程中，需要选择头像，上传头像，填写基本信息（用户名、密码等）后，点击注册按钮，完成用户注册。当下次登录时需要看到以前提交的头像图片。
-
提供注册页面，让用户选择头像，上传头像，填写基本信息。当头像选择完毕后立即上传图片，获取图片的访问链接地址：http://ip:port/upload/touxiang.jpg
-
当点击注册按钮时，需要整理一个表单，发送post请求，提交注册请求，所需要的参数包含上传头像后的头像访问链接地址，格式如下：
-
服务端接受到了注册请求后，解析所有的参数，执行sql语句，将用户信息存入数据表：
-
至此，用户注册成功。当用户使用zs：123456登录时，服务端需要返回用户的信息，用户的信息中就包含了上次上传的头像的链接地址，这样浏览器就可以在页面中显示该用户的头像了。
二、WebSocket
（一）客户端与服务端之间的通信模式
1.短连接模式
客户端与服务端交互，请求建立连接，连接建立成功后，客户端向服务端发送数据，服务端接收，处理数据，返回结果，而后连接断开。这种通信模式为短连接模式。
优点：及时释放服务端资源，可以让服务端处理更多的客户端的请求。
2.长连接模式
客户端与服务端交互，请求建立连接，连接建立成功后，客户端向服务端发送数据，服务端接收，处理数据，返回结果，而后保持连接不断开。这种通信模式为长连接模式。
优点：可以实现客户端与服务端双向实时交互。
WebSocket用于实现客户端与服务端之间的长连接交互模型
WebSocket是一种基于长连接模式的全双工的通信协议。若希望在网页中基于websocket实现长连接通信就需要使用websocket技术。
在此推荐一款实现了websocket协议的通信框架：socket.io。
Socket.io
需要基于Socket.io实现以下4个主要功能：
-
使用
socket.io完成网页中的js与 服务端的nodejs之间websocket连接的建立。 -
使用
socket.io实现让客户端给服务端发消息。 -
使用
socket.io实现让服务端给客户端发消息。 -
使用
socket.io实现服务端给所有客户端群发消息。
（二）使用socket.io完成网页中的js 与 服务端的nodejs之间websocket连接的建立。
-
服务端代码 （nodejs项目）
-
建立一个新的项目。（文件夹：socketserver）
-
在项目中，安装所需模块：express、socket.io。
-
编写后端主js文件：
index.js。用于处理客户端websocket请求。
-
-
客户端代码（socket.html）
-
新建socket.html文件。
-
在html中引入
socket.io.js，编写代码向服务端建立连接。
-
（三）使用socket.io实现让客户端给服务端发消息。
-
客户端发消息
-
服务端接收消息
（四）使用socket.io实现让服务端给客户端发消息。
-
服务端发送消息
-
客户端接收消息
（五）使用socket.io实现服务端给所有客户端群发消息。
（六）群聊天室
-
完成客户端与服务端之间
websocket连接的建立。 -
实现群聊业务。
在文本框中输入内容，点击发表按钮。给服务端发消息。
服务端接收到消息后，给所有客户端群发一下这一条消息即可。
-
实时更新聊天室的在线人数。无论任何人进入聊天室或从聊天室退出，都需要更新所有客户端的当前在线人数的数量。
-
在服务端设计一个变量：count用于保存当前在线人数。默认为0。
-
每当有客户端进入聊天室（连接成功），count++
-
每当有客户端退出聊天室（连接断开），count--
-
每当有客户端进入聊天室、退出聊天室时，不仅要更新count，还需要把count的值给所有在线客户端发一遍。
-
客户端接收了当前在线人数后，更新
span。
-
-
发消息时保留用户状态。每个消息都需要说明消息的归属人（带头像、带昵称）。
-
当发消息时，不仅需要发送消息内容，还需要发送个人昵称与头像图片路径。
-
服务端接收到的消息将是一个完整的对象，二话不说，将这个对象给所有客户端群发了一遍。
-
每个客户端接收到的消息都是一个对象：{text, nickname, avatar}，这样就可以显示发送者的相关信息。
-