使用socket.io + express + mongodb制作在线聊天室

一、先用websocket制作简易版本的聊天室

使用Websocket制作简易聊天室

二、再用socket.io + express + mongodb制作复杂一点的在线聊天室

  • 代码地址:https://github.com/ChangYanwei/chatroom
  • 体验地址:http://8.131.68.141:7000
  • 使用socket.io监听连接的建立、断开事件,监听用户的登录、发送消息事件
  • 使用express开放静态资源目录
  • 使用html2canvas实现截图
  • 使用jQuery-emoji添加表情
  • 除了选用默认头像外,用户可以上传本地图片作为头像
  • 点击图片消息放大预览
  • 用户信息保存到了MongoDB数据库中,使用mongoose在node中操作数据库
  • 聊天记录没有持久化存储,刷新页面后聊天信息就没有了

注册页面

使用socket.io + express + mongodb制作在线聊天室_第1张图片

登录界面

使用socket.io + express + mongodb制作在线聊天室_第2张图片

聊天界面

使用socket.io + express + mongodb制作在线聊天室_第3张图片
使用socket.io + express + mongodb制作在线聊天室_第4张图片
使用socket.io + express + mongodb制作在线聊天室_第5张图片

修改头像

使用socket.io + express + mongodb制作在线聊天室_第6张图片

mongodb数据库中存储的用户信息

使用socket.io + express + mongodb制作在线聊天室_第7张图片

动图展示

你可能感兴趣的:(前端,websocket,mongodb,node,聊天室,sock.io)