websocket+elementui+vue实现简易聊天室

这篇具有很好参考价值的文章主要介绍了websocket+elementui+vue实现简易聊天室。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

搭建服务端环境

npm install socket.io

安装socket.io

服务端基于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' , '昵称重复')
      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用于向所有建立连接的客户端发送信息,socket.broadcast.emit用于向除发送方之外的客户端发送信息。

客户端基于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="请输入内容"></el-input>
      <el-button type="primary" @click="send" class="width100"
        >发送消息</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 ? "进入" : "离开";
      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>

进入聊天页面后,先判断用户是否登录,如果登录,不必填写昵称,直接用用户昵称即可,反之,modal框会出现,必须填写昵称。之后,前端触发login事件,后端监听到login事件,io.sockets.emit向所有建立连接的客户端发送xxx登录信息,前端发送信息,触发chat事件,后端监听到事件之后,做出响应,触发response_chat事件。

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

例:

elementui聊天窗口,websocket,elementui,vue.js

elementui聊天窗口,websocket,elementui,vue.js

elementui聊天窗口,websocket,elementui,vue.js

elementui聊天窗口,websocket,elementui,vue.js

elementui聊天窗口,websocket,elementui,vue.js

elementui聊天窗口,websocket,elementui,vue.js文章来源地址https://www.toymoban.com/news/detail-857111.html

到了这里,关于websocket+elementui+vue实现简易聊天室的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于WebSocket的简易聊天室的基本实现梳理

    目前在很多网站为了实现推送技术所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信

    2024年02月11日
    浏览(40)
  • Java+Vue实现聊天室(WebSocket进阶-聊天记录)

    WebSocket 是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范。WebSocket API也被W3C定为标准。 WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服

    2024年02月11日
    浏览(65)
  • 【WebSocket&IndexedDB】node+WebSocket&IndexedDB开发简易聊天室

    序幕介绍: WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 讲人话就是说: WebSocket 使得客户端和服务器之间的数据交换变得更加简单,在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数

    2024年02月10日
    浏览(47)
  • websocket实现聊天室(vue2 + node)

    需求分析如图: 搭建的项目结构如图: 前端步骤: vue create socket_demo (创建项目) views下面建立Home , Login组件 路由里面配置路径 Home组件内部开启websocket连接 前端相关组件代码: Login组件 Home组件 router/index.js 后端步骤: 在项目外层创建server文件夹(src目录同级) npm init -y创建

    2024年01月22日
    浏览(55)
  • SpringBoot和Vue2集成WebSocket,实现聊天室功能

    springboot集成websocket实现聊天室的功能。如有不足之处,还望大家斧正。

    2024年01月23日
    浏览(47)
  • 【你的第一个socket应用】Vue3+Node实现一个WebSocket即时通讯聊天室

    这篇文章主要是用WebSocket技术实现一个 即时通讯聊天室 ,首先先要了解为什么使用WebSocket而不是普通的HTTP协议,如果使用HTTP协议它是下面这种情况: 我发送一条消息,发送一个发送消息的请求;* 一直轮询接收别人发送的消息,不管有没有发送都要定时去调用接口。这里明

    2023年04月20日
    浏览(63)
  • Qt实现简易聊天室

    目录 一、界面展示(界面用ui 设计)  群成员展示界面( denglu)    聊天界面展示( widget ) 二、代码展示 (所有代码非原创)  denglu.h和widget.h  denglu.cpp、main.cpp、widget.cpp 三、软件制作  

    2024年02月08日
    浏览(47)
  • 在线聊天室(Vue+Springboot+WebSocket)

    实现了一个简单的在线聊天室的前后端。前端用Vue实现,后端用Springboot实现。         在线聊天室的功能包括创建用户和显示在线用户列表、发送消息和显示消息列表、用户和消息列表实时更新这几点。以下是整体功能的活动图: 用户身份         进入聊天室的用户需

    2024年01月15日
    浏览(52)
  • 用Java实现简易聊天室

      说明:如果一个 类,需要有界面的显示,那么该类就需要继承自JFrame,此时,该类就可以被称为一个“窗体类\\\"。   服务端代码: 客户端代码:  启动时,必须先启动服务端,再启动客户端。 最终效果:      

    2024年02月11日
    浏览(42)
  • LinuxC TCP实现简易聊天室

    目录 1.概述 1.1聊天室设计内容 2.系统设计 2.1系统功能设计 2.1.1用户管理 2.1.2聊天室管理 2.1.3聊天管理 2.2系统数据结构设计 2.3系统主要函数设计 3.系统实现 3.2功能模块的程序流程图及运行界面 3.2.1功能模块流程图  3.2.2运行界面 4.源代码 4.1客户端 4.2服务器 注:存在问题 1

    2024年02月09日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包