快捷導(dǎo)航

node.js結(jié)合webSocket實(shí)現(xiàn)聊天室

更新時(shí)間：2023年08月20日 15:11:43 作者：牧羊狼的狼

于Node.js和WebSocket的聊天室,主要包括前端頁(yè)面,主要是用戶(hù)操作的頁(yè)面,還包括后臺(tái)數(shù)據(jù)通信以及邏輯處理,具有一定的參考價(jià)值,感興趣的可以了解一下

后端代碼

src 同級(jí)目錄下建 server:

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const io = require('socket.io')(server, { cors: true })
io.on('connection', (socket) => {
  console.log('socket 已連接');
  socket.on('sendToServer', data => {
    console.log(`收到了前端發(fā)來(lái)的消息: ${data}`);
    io.emit("sendToClient", data);
  })
  socket.on('disconnect', () => {
    console.log('斷開(kāi)連接');
  });
});
server.listen(3000, () => {
  console.log('listening on *:3000');
});

前端代碼

核心代碼：

import io from 'socket.io-client'
var socket = io('ws://localhost:3000')
socket.on("sendToClient", data => {
  console.log(`收到了后端發(fā)來(lái)的數(shù)據(jù)：${data}`);
  records.value.push(JSON.parse(data))
})
const sendMessage = () => {
  if (!message.value.trim()) return
  const record: IRecord = reactive({
    message: message.value,
    nickname,
    userId: new Date().getTime() + '',
    color: '',
    sendTime: getYMDHMS(new Date().getTime())
  })
  socket.emit('sendToServer', JSON.stringify(record));
  message.value = '';
}

完整代碼：

<template>
  <div class="chat-room">
    <div class="nav"></div>
    <div class="main">
      <div class="title">
        <span>圖靈聊天室（{{ userCount }}）</span>
      </div>
      <div class="content" ref="recordsContent">
        <div v-for="(itm, inx) in records" :key="inx">
          <div
            class="item"
            :class="[itm.nickname === nickname ? 'item' : 'item-other']"
          >
            <div class="info">[ {{ itm.nickname }}：{{ itm.sendTime }} ]</div>
            <span class="message">{{ itm.message }}</span>
          </div>
        </div>
      </div>
      <div class="input-box">
        <div class="text">
          <textarea :rows="8" v-model="message" @keydown="onKeydown"></textarea>
        </div>
        <div class="opt">
          <button ghost @click="sendMessage">發(fā) 送</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import io from 'socket.io-client'
import { reactive, ref } from 'vue'
interface IRecord {
  nickname: string,
  userId: string,
  color: string,
  message: string,
  sendTime: string
}
const userCount = ref(2)
const records = ref<IRecord[]>([])
const message = ref('')
const nickname = localStorage.getItem('username') || '匿名用戶(hù)'
var socket = io('ws://localhost:3000')
socket.on("sendToClient", data => {
  console.log(`收到了后端發(fā)來(lái)的數(shù)據(jù)：${data}`);
  records.value.push(JSON.parse(data))
})
const sendMessage = () => {
  if (!message.value.trim()) return
  const record: IRecord = reactive({
    message: message.value,
    nickname,
    userId: new Date().getTime() + '',
    color: '',
    sendTime: getYMDHMS(new Date().getTime())
  })
  socket.emit('sendToServer', JSON.stringify(record));
  message.value = '';
}
const onKeydown = (event: any) => {
  if (event.keyCode === 13) {
    sendMessage()
  }
}
function getYMDHMS(timestamp:number) {
  let time = new Date(timestamp)
  let year = time.getFullYear()
  let month:any = time.getMonth() + 1
  let date:any = time.getDate()
  let hours:any = time.getHours()
  let minute:any = time.getMinutes()
  let second:any = time.getSeconds()
  if (month < 10) { month = '0' + month }
  if (date < 10) { date = '0' + date }
  if (hours < 10) { hours = '0' + hours }
  if (minute < 10) { minute = '0' + minute }
  if (second < 10) { second = '0' + second }
  return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
}
</script>
<style scoped lang="scss">
.chat-room {
  margin: 0px auto;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  border: 1px solid #ccc;
  overflow: hidden;
  .nav {
    width: 66px;
    background: #363636;
    flex-shrink: 0;
  }
  .main {
    display: flex;
    background: #efefef;
    flex: 1;
    width: 0;
    display: flex;
    flex-direction: column;
    .title {
      height: 60px;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 700;
      padding-left: 20px;
      border-bottom: 1px solid #c3c3c3;
      flex-shrink: 0;
    }
    .content {
      flex: 1;
      height: 0px;
      position: relative;
      overflow-y: auto;
      padding: 10px;
      .item {
        text-align: right;
        .info {
          font-size: 14px;
          color: #666;
        }
        .message {
          font-size: 18px;
          background-color: rgba(110, 89, 228, 0.579);
          margin: 10px;
          padding: 8px 12px;
          border-radius: 8px;
          display: inline-block;
          color: #333;
        }
      }
      .item-other {
        text-align: left;
        .message {
          background-color: rgb(218, 197, 112);
        }
      }
    }
    .input-box {
      height: 230px;
      border-top: 1px solid #c3c3c3;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      .text {
        flex: 1;
        textarea {
          width: 94%;
          height: 160px;
          font-size: 16px;
          resize: none;
          border: none;
          padding: 8px 24px;
          background: #efefef;
          &:focus {
            outline: none;
          }
          &:focus-visible {
            outline: none;
          }
        }
      }
      .opt {
        height: 60px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 20px;
      }
    }
  }
}
</style>

到此這篇關(guān)于node.js結(jié)合webSocket實(shí)現(xiàn)聊天室的文章就介紹到這了,更多相關(guān)node.js webSocket聊天室內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: