文件上传经典业务流程 – 上传头像
在注册业务,填写表单的过程中,需要选择头像,上传头像,填写基本信息(用户名、密码等)后,点击注册按钮,完成用户注册。当下次登录时需要看到以前提交的头像图片。
-
提供注册页面,让用户选择头像,上传头像,填写基本信息。当头像选择完毕后立即上传图片,获取图片的访问链接地址:http://ip:port/upload/touxiang.jpg
-
当点击注册按钮时,需要整理一个表单,发送post请求,提交注册请求,所需要的参数包含上传头像后的头像访问链接地址,格式如下:
http://localhost:3000/register // 注册请求 需要传递的参数: name=zs&pwd=123456&phone=13334563456&url=http://ip:port/upload/touxiang.jpg&email=mail@tedu.cn
-
服务端接受到了注册请求后,解析所有的参数,执行sql语句,将用户信息存入数据表:
id name pwd phone url email 1 zs 123456 13334563456 http://xxxx mail@xx -
至此,用户注册成功。当用户使用zs:123456登录时,服务端需要返回用户的信息,用户的信息中就包含了上次上传的头像的链接地址,这样浏览器就可以在页面中显示该用户的头像了。
WebSocket
客户端与服务端之间的通信模式
短连接模式
客户端与服务端交互,请求建立连接,连接建立成功后,客户端向服务端发送数据,服务端接收,处理数据,返回结果,而后连接断开。这种通信模式为短连接模式。
优点:及时释放服务端资源,可以让服务端处理更多的客户端的请求。
长连接模式
客户端与服务端交互,请求建立连接,连接建立成功后,客户端向服务端发送数据,服务端接收,处理数据,返回结果,而后保持连接不断开。这种通信模式为长连接模式。
优点:可以实现客户端与服务端双向实时交互。
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。
npm init -y # 初始化npm项目,生成package.json npm install express@4 # 安装express npm install socket.io # 安装socket.io
-
编写后端主js文件:
index.js
。用于处理客户端websocket
请求。
-