搭建服務(wù)端環(huán)境

npm install socket.io

安裝socket.io

服務(wù)端基于node,js的express框架生成，所以寫成模塊，引入至app.js中

const app = require('./app')
const http = require('http')
const socketIo = require('socket.io')
const httpServer = http.Server(app)
const io = socketIo(httpServer , {})
const users = {}
io.on('connection' , (socket)=>{
  socket.on('login' , (nikname)=>{
    if(users[nikname]){
      socket.emit('repeat' , '昵稱重復(fù)')
      return 
    }
    socket.nikname = nikname
    users[nikname] = {
      name: nikname,
      socket : socket,
    }
    io.sockets.emit('logged' , {nikname , isLogin:true} )
  })
  socket.on("disconnecting", (reason) => {
    let nikname = socket?.nikname
    if(nikname && users[nikname]){
      delete users[nikname]
      io.sockets.emit('logout' , {nikname , isLogin: false} )
      delete socket[nikname]
    }
    console.log('斷開連接')
  });
  socket.on('chat' , (data)=>{
    console.log(data , socket.nikname)
    socket.broadcast.emit('response_chat' , {
      nikname: socket.nikname,
      msg: data
    })
  })
  
})
httpServer.listen(8888)
module.exports = httpServer

其中，io.sockets.emit用于向所有建立連接的客戶端發(fā)送信息，socket.broadcast.emit用于向除發(fā)送方之外的客戶端發(fā)送信息。

客戶端基于vue和elementui

<template>
  <div>
    <div class="talkView--content--body">
      <ul>
        <li v-for="(item, idx) in chatList" :key="idx">
          <div :class="item.style">
            <div v-if="item.style === right">
              <span>{{ item.msg }}</span>
            </div>
            <div v-else>
              <span v-show="item.nikname">{{ item.nikname }}：</span>
              <span>{{ item.msg }}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="talkView--content--control">
      <el-input v-model="sendMsg" placeholder="請(qǐng)輸入內(nèi)容"></el-input>
      <el-button type="primary" @click="send" class="width100"
        >發(fā)送消息</el-button
      >
    </div>
    <el-dialog title="輸入昵稱" :visible="dialogVisible" width="30%">
      輸入昵稱:
      <el-input v-model="nikname"> </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="login">確 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { io } from "socket.io-client";
export default {
  beforeDestroy() {
    // 斷開連接
    this.socket.disconnect();
  },
  data() {
    return {
      socket: null,
      sendMsg: "",
      nikname: "",
      dialogVisible: false,
      chatList: [],
    };
  },
  created() {
    this.socket = io("ws://127.0.0.1:8888", {
      transports: ["websocket"],
    });
    this.getNikname();
    this.socket.on("connect", () => {
      console.log("建立連接"); // ojIckSD2jqNzOqIrAGzL
    });
    this.socket.on("response_chat", (data) => {
      this.severChat(data);
    });
    this.socket.on("logged", (data) => {
      this.severLog(data);
    });
    this.socket.on("logout", (data) => {
      this.severLog(data);
    });
  },
  mounted() {},

  methods: {
    severLog({ nikname, isLogin }) {
      let state = isLogin ? "進(jìn)入" : "離開";
      let msg = `${nikname}${state}聊天室`;
      this.addChat({
        msg,
        style: "center",
      });
    },
    addChat({ msg = "xxx", nikname = "", style = "xxx" }) {
      this.chatList.push({
        nikname,
        msg,
        style,
      });
    },
    getNikname() {
      let nikname = this.$store.state.userInfor?.nikname;
      if (nikname) {
        this.dialogVisible = false;
        this.socket.emit("login", nikname);
      }
      this.dialogVisible = !nikname;
      this.nikname = nikname;
    },
    login() {
      if (!this.nikname) {
        this.$notify({
          message: "昵稱不為空",
        });
        return;
      }
      this.socket.emit("login", this.nikname);
      this.dialogVisible = false;
    },
    send() {
      let msg = this.sendMsg;
      this.addChat({
        msg,
        nikname: this.nikname,
        style: "right",
      });
      this.socket.emit("chat", this.sendMsg);
      this.sendMsg = ''
    },
    severChat({ msg = "", nikname = "" }) {
      console.log(msg, nikname);
      this.addChat({
        nikname,
        msg,
        style: "left",
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
ul
  list-style none
.talkView--content--body 
  width: 100%;
  height: 60vh;
  background-color: #fff;
  color: #333;
  .center
    text-align: center
  .left
    text-align: left
  .right
    text-align: right


.width100 {
  width: 100%;
  margin-top: 10px;
}
</style>

進(jìn)入聊天頁(yè)面后，先判斷用戶是否登錄，如果登錄，不必填寫昵稱，直接用用戶昵稱即可，反之，modal框會(huì)出現(xiàn)，必須填寫昵稱。之后，前端觸發(fā)login事件，后端監(jiān)聽到login事件，io.sockets.emit向所有建立連接的客戶端發(fā)送xxx登錄信息，前端發(fā)送信息，觸發(fā)chat事件，后端監(jiān)聽到事件之后，做出響應(yīng)，觸發(fā)response_chat事件。

涉及到的信息。存入chatList中，便于展示

例：

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-857111.html

到了這里，關(guān)于websocket+elementui+vue實(shí)現(xiàn)簡(jiǎn)易聊天室的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！