成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

dendoink / 2324人閱讀

摘要：簡易版聊天室技術(shù)棧功能實(shí)現(xiàn)實(shí)時(shí)聊天創(chuàng)建房間表情包完善私聊效果登錄服務(wù)端判斷之前是否登錄過聊天室，如果是則直接進(jìn)入聊天室，否則跳轉(zhuǎn)到登錄頁面。客戶端發(fā)送創(chuàng)建房間和切換房間的事件給服務(wù)端。

Chat 
簡易版聊天室
技術(shù)棧

express

socket.io

功能

實(shí)現(xiàn)

實(shí)時(shí)聊天

創(chuàng)建房間

表情包

完善

私聊

效果 登錄

服務(wù)端判斷之前是否登錄過聊天室，如果是則直接進(jìn)入聊天室，否則跳轉(zhuǎn)到登錄頁面。

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


客戶端發(fā)送消息，并接收服務(wù)端發(fā)來的消息

// 發(fā)送消息
$(".send_btn").click(sendMsg)

function sendMsg () {
  // 判斷消息消息是否為空
  let content = info.text().trim();
  if (!content) {
    alert("請輸入內(nèi)容")
    return;
  }

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

  // 將自己發(fā)送的消息添加到消息列表當(dāng)中
  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);
}

// 監(jiān)聽來自同一房間發(fā)來的消息
socket.on("send msg", function (info) {
  // 將發(fā)送過來的消息添加到消息列表中
  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);
})

    服務(wù)端監(jiān)聽客戶端發(fā)來的消息，并將接受到的消息轉(zhuǎn)發(fā)給同一房間中的客戶端

    socket.on("send msg", function (content) {
  // 發(fā)送消息給同一房間的客戶端
  socket.to(socket.room).emit("send msg", {
    name: socket.user,
    content: content,
    time: common.getTime()
  })
})
    創(chuàng)建房間

    創(chuàng)建房間可以分為兩步：用戶創(chuàng)建房間，用戶切換至新的房間。

    客戶端發(fā)送創(chuàng)建房間和切換房間的事件給服務(wù)端。

    // 添加房間
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);
  }
  // 更改標(biāo)題的名稱
  now.text(active);
})

    服務(wù)端增加、切換房間，發(fā)送刷新房間列表、用戶列表的事件給客戶端

    // 增加房間
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;
  
  // 發(fā)送刷新用戶列表的消息
  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]);

  // 通知進(jìn)入的房間刷新用戶列表
  io.to(socket.room)
    .emit("refresh users", rooms[socket.room]);
})

    具體請看源碼，謝謝!

    最后

    貼出來主要希望能吸收建議。點(diǎn)擊查看源碼

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85162.html

    相關(guān)文章

    • 利用express+socket.io實(shí)現(xiàn)一個(gè)簡易版聊天室

      摘要：用偽代碼來模擬下長輪詢的過程前端利用下面函數(shù)進(jìn)行請求后端代碼做如下更改利用隨機(jī)數(shù)的大小來模擬是否有新數(shù)據(jù)有新數(shù)據(jù)來了長輪詢的確減少了請求的次數(shù)，但是它也有著很大的問題，那就是耗費(fèi)服務(wù)器的資源。 寫在前面 最近由于利用node重構(gòu)某個(gè)項(xiàng)目，項(xiàng)目中有一個(gè)實(shí)時(shí)聊天的功能，于是就研究了一下聊天室，在線demo|源碼，歡迎大家反饋。這個(gè)聊天室的主要利用到了socket.io和express。這個(gè)...

      Chaz 評論0 收藏0

    • vue+socket.io+express+mongodb 實(shí)現(xiàn)簡易多房間在線群聊

      摘要：項(xiàng)目簡介主要是通過做一個(gè)多人在線多房間群聊的小項(xiàng)目來練手全棧技術(shù)的結(jié)合運(yùn)用。編譯運(yùn)行開啟服務(wù)，新建命令行窗口啟動服務(wù)端，新建命令行窗口啟動前端頁面然后在瀏覽器多個(gè)窗口打開，注冊不同賬號并登錄即可進(jìn)行多用戶多房間在線聊天。 項(xiàng)目簡介 主要是通過做一個(gè)多人在線多房間群聊的小項(xiàng)目、來練手全棧技術(shù)的結(jié)合運(yùn)用。 項(xiàng)目源碼：chat-vue-node 主要技術(shù)： vue2全家桶 + socket....

      android_c 評論0 收藏0

    • 聊一聊Web端的即時(shí)通訊

      摘要：聊一聊端的即時(shí)通訊端實(shí)現(xiàn)即時(shí)通訊的方法有哪些短輪詢長輪詢流輪詢客戶端定時(shí)向服務(wù)器發(fā)送請求，服務(wù)器接到請求后馬上返回響應(yīng)信息并關(guān)閉連接。介紹是開始提供的一種在單個(gè)連接上進(jìn)行全雙工通訊的協(xié)議。 聊一聊Web端的即時(shí)通訊 Web端實(shí)現(xiàn)即時(shí)通訊的方法有哪些? - 短輪詢 長輪詢 iframe流 Flash Socket 輪詢 客戶端定時(shí)向服務(wù)器發(fā)送Ajax請求，服務(wù)器接到請求后馬上返...

      KevinYan 評論0 收藏0

    • vue.js+socket.io打造一個(gè)好玩的新聞社區(qū)

      摘要：云新聞云新聞收藏的使用需要注意的地方提交的是，而不是直接的狀態(tài)變更可以包含任意異步操作。的使用利用實(shí)現(xiàn)了簡單的聊天功能，在同一個(gè)服務(wù)器下。 title: Socket.io+vue打造新聞社區(qū)date: 2017-06-12 20:19:05 tags: [vue.js,javascript,socket.io] vue2.0 + socket.io打造一個(gè)DIY新聞社區(qū)（web第一...

      xiguadada 評論0 收藏0

    發(fā)表評論

    0條評論

    dendoink

    男|高級講師

    TA的文章

    閱讀更多
    最新活動
    閱讀需要支付1元查看
    <