基于express和socket.io的简易版聊天室

dendoink 发布于2019-08-20 19:07 / 2313人阅读

摘要：简易版聊天室技术栈功能实现实时聊天创建房间表情包完善私聊效果登录服务端判断之前是否登录过聊天室，如果是则直接进入聊天室，否则跳转到登录页面。客户端发送创建房间和切换房间的事件给服务端。

Chat

简易版聊天室

技术栈

express

socket.io

功能

实现

实时聊天

创建房间

表情包

完善

私聊

效果登录

服务端判断之前是否登录过聊天室，如果是则直接进入聊天室，否则跳转到登录页面。

app.get("/", function (req, res, next) {
  if (req.cookies.name) {
    router.showIndex(req, res, next);
  } else {
    res.redirect("/login");
  }
});

聊天

客户端发送消息，并接收服务端发来的消息

// 发送消息
$(".send_btn").click(sendMsg)

function sendMsg () {
  // 判断消息消息是否为空
  let content = info.text().trim();
  if (!content) {
    alert("请输入内容")
    return;
  }

  // 发送消息后清空文本
  info.text("").focus();
  socket.emit("send msg", content);

  // 将自己发送的消息添加到消息列表当中
  let li_info = $("");
  let span_time = $(`${getTime()}`)
  let p_user = $("").text($.cookie("name")).prepend(span_time);
  let p_content = $("").text(content);

  li_info.append(p_user).append(p_content);
  msg.append(li_info);
}

// 监听来自同一房间发来的消息
socket.on("send msg", function (info) {
  // 将发送过来的消息添加到消息列表中
  let li_info = $("");
  let span_time = $(`${info.time}`)
  let p_user = $("").text(info.name).append(span_time);
  let p_content = $("").text(info.content);

  li_info.append(p_user).append(p_content);
  msg.append(li_info);
})

服务端监听客户端发来的消息，并将接受到的消息转发给同一房间中的客户端

socket.on("send msg", function (content) {
  // 发送消息给同一房间的客户端
  socket.to(socket.room).emit("send msg", {
    name: socket.user,
    content: content,
    time: common.getTime()
  })
})

创建房间

创建房间可以分为两步：用户创建房间，用户切换至新的房间。

客户端发送创建房间和切换房间的事件给服务端。

// 添加房间
addRoom.click(function () {
  // 对房间的判断之类省略...

  if (roomLen > 0 && !exist) {
    socket.emit("add room", room);
    socket.emit("change room", room);
  }
})

// 刷新用户列表
socket.on("refresh users", function (usersName) {
  users.empty();
  for (let userName of usersName) {
    let li = $("").text(userName);
    if (userName == $.cookie("name")) {
      li.addClass("me")
    }
    users.append(li)
  }
})

// 刷新房间列表
socket.on("refresh rooms", function ({rooms, active}) {
  roomsList.empty();
  for (let room of Object.keys(rooms)) {
    let li_room = $(``);
    let span_room = $("").text(room)
    let span_num = $(`${rooms[room].length}人`);
    if (room == active) {
      li_room.addClass("active_room");
    }
    
    li_room.append(span_room).append(span_num);
    roomsList.append(li_room);
  }
  // 更改标题的名称
  now.text(active);
})

服务端增加、切换房间，发送刷新房间列表、用户列表的事件给客户端

// 增加房间
socket.on("add room", function (room) {
  rooms[room] = [];
})

// 切换房间
socket.on("change room", function (to) {
  // 记录用户离开的房间
  let from = socket.room;
  common.removeItem(rooms[from], socket.user);

  // 将用户传送到新的房间
  rooms[to].push(socket.user);
  socket.room = to;
  
  // 发送刷新用户列表的消息
  for (let i in users) {
    users[i].emit("refresh rooms", {
      rooms: rooms,
      active: users[i].room
    })
  }

  // 离开和加入新的房间
  socket.leaveAll();
  socket.join(socket.room);

  // 通知离开的房间刷新用户列表
  socket.to(from)
    .emit("refresh users", rooms[from]);

  // 通知进入的房间刷新用户列表
  io.to(socket.room)
    .emit("refresh users", rooms[socket.room]);
})

具体请看源码，谢谢!

最后

贴出来主要希望能吸收建议。点击查看源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85162.html

利用express+socket.io实现一个简易版聊天室

摘要：用伪代码来模拟下长轮询的过程前端利用下面函数进行请求后端代码做如下更改利用随机数的大小来模拟是否有新数据有新数据来了长轮询的确减少了请求的次数，但是它也有着很大的问题，那就是耗费服务器的资源。写在前面最近由于利用node重构某个项目，项目中有一个实时聊天的功能，于是就研究了一下聊天室，在线demo|源码，欢迎大家反馈。这个聊天室的主要利用到了socket.io和express。这个...

Chaz 2019-08-22 10:39 评论0 收藏0
vue+socket.io+express+mongodb 实现简易多房间在线群聊

摘要：项目简介主要是通过做一个多人在线多房间群聊的小项目来练手全栈技术的结合运用。编译运行开启服务，新建命令行窗口启动服务端，新建命令行窗口启动前端页面然后在浏览器多个窗口打开，注册不同账号并登录即可进行多用户多房间在线聊天。项目简介主要是通过做一个多人在线多房间群聊的小项目、来练手全栈技术的结合运用。项目源码：chat-vue-node 主要技术： vue2全家桶 + socket....

android_c 2019-06-26 17:25 评论0 收藏0
聊一聊Web端的即时通讯

摘要：聊一聊端的即时通讯端实现即时通讯的方法有哪些短轮询长轮询流轮询客户端定时向服务器发送请求，服务器接到请求后马上返回响应信息并关闭连接。介绍是开始提供的一种在单个连接上进行全双工通讯的协议。聊一聊Web端的即时通讯 Web端实现即时通讯的方法有哪些? - 短轮询长轮询 iframe流 Flash Socket 轮询客户端定时向服务器发送Ajax请求，服务器接到请求后马上返...

KevinYan 2019-08-22 18:00 评论0 收藏0
vue.js+socket.io打造一个好玩的新闻社区

摘要：云新闻云新闻收藏的使用需要注意的地方提交的是，而不是直接的状态变更可以包含任意异步操作。的使用利用实现了简单的聊天功能，在同一个服务器下。 title: Socket.io+vue打造新闻社区date: 2017-06-12 20:19:05 tags: [vue.js,javascript,socket.io] vue2.0 + socket.io打造一个DIY新闻社区（web第一...

xiguadada 2019-08-20 17:19 评论0 收藏0