极简websocket实时聊天

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

在线体验链接:http://47.242.53.5:888/

项目git地址:https://gitee.com/xiao-ming-1999/websocket-server.git

实现步骤:

  1. 在前端创建WebSocket连接:在Vue组件中使用vue-native-websocket库或原生的WebSocket API来创建WebSocket连接。确保连接到服务器的WebSocket地址和端口。

  2. 在前端发送消息:在Vue组件中通过WebSocket连接发送用户输入的消息到服务器。可以通过表单提交、按钮点击等方式触发发送操作,并使用WebSocket的send方法将消息发送给服务器。

  3. 在后端处理WebSocket连接:在服务器端使用Node.js和Express或其他后端框架来处理WebSocket连接请求,并维护连接状态。

  4. 在后端接收和广播消息:在服务器端监听WebSocket连接的message事件,当接收到一条新消息时,将其广播给所有连接的客户端。

  5. 在前端接收和显示消息:在Vue组件中监听WebSocket的message事件,当接收到新消息时,在页面上更新聊天消息列表或对话框。

前端代码:

<template>
  <div class="chat-box">
    <h2>websocket-chat</h2>
    <ul>
      <li
        v-for="(message, index) in messages"
        :key="index"
        :style="{ background: '#' + message.bgColor }"
        class="message-item"
      >
        <p>{{ message.sender }}:{{ message.text }}</p>
      </li>
    </ul>

    <div class="chat-btn">
      <van-field
        v-model="newMessage"
        center
        clearable
        placeholder="请随意输入信息"
        @keydown.enter="sendMessage"
      >
        <template #button>
          <van-button type="primary" @click="sendMessage">发送</van-button>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
const randomColor = Math.floor(Math.random() * 16777215).toString(16);
// const randomColor2 = Math.floor(Math.random() * 16777215).toString(16);
export default {
  name: "clockIn",
  data() {
    return {
      messages: [],
      newMessage: "",
      userId: Date.now(),
      randColor: randomColor,
    };
  },
  mounted() {
    // 监听WebSocket的message事件,当接收到新消息时,在页面上更新聊天消息列表或对话框。
    this.$socket.onmessage = (event) => {
      const message = JSON.parse(event.data);
      this.messages.push(message);
      console.log(this.messages, "this.messages");
    };

    this.$socket.onopen = () => {
      this.$socket.send(JSON.stringify({ action: "getUserId" }));
    };
  },
  methods: {
    sendMessage() {
      const message = {
        id: this.userId,
        text: this.newMessage,
        bgColor: this.randColor,
      };
      // this.messages.push(this.newMessage);
      this.$socket.send(JSON.stringify(message));
      this.newMessage = "";
    },
  },
};
</script>
<style lang="scss" scoped>
.chat-box {
  height: 100vh;
  overflow-y: auto;
  padding: 50px 0;

  h2 {
    position: fixed;
    top: 0;
    background-color: #07c160;
    font-weight: 700;
    text-align: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: #fff;
  }
}

.chat-btn {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  ::v-deep .van-cell {
    padding-right: 0;
  }
}

.message-item {
  width: 100%;
  // height: 40px;
  // line-height: 40px;

  // white-space: pre-wrap;
}
</style>

 后端代码文章来源地址https://www.toymoban.com/news/detail-560116.html

const express = require("express");
const WebSocket = require("ws");

const app = express();

app.get("/", (req, res) => {
  res.send("Hello, World!"); // 发送响应给客户端
});

const server = app.listen(3008, () => {
  console.log("Server is running on http://47.242.53.5:3008");
});

const wss = new WebSocket.Server({ server });
const clients = [];

wss.on("connection", (ws) => {
  // 服务器端监听WebSocket连接的message事件,当接收到一条新消息时,将其广播给所有连接的客户端。
  ws.on("message", (message) => {
    const parsedMessage = JSON.parse(message);
    console.log(message, "message");
    if (parsedMessage.action === "getUserId") {
      ws.userId = generateUserId(); // 分配用户标识符
      //   ws.send(JSON.stringify({ userId: ws.userId }));
      return;
    }

    parsedMessage.sender = ws.userId;
    const broadcastMessage = JSON.stringify(parsedMessage);
    // 广播消息给所有连接的客户端
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(broadcastMessage);
      }
    });
  });

  ws.on("close", () => {
    // 移除关闭的客户端连接
    clients.splice(clients.indexOf(ws), 1);
  });
});
// 生成用户昵称
function generateUserId() {
  return Math.random().toString(36).substr(2, 9);
}

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

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

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

相关文章

  • js和java交互websocket实现实时聊天

    目录 1.运用场景(实现效果):  2.代码及其讲解: js配置: (1)时间判断函数: (2)建立ws连接: 结束!         前端运用原生js来与后端提供的ws进行交互,实现在线实时聊天,离线储存数据方便读取聊天记录的效果,效果图如下: (1)时间判断函数: (2)建立ws连接:

    2024年02月12日
    浏览(36)
  • vue和node使用websocket实现数据推送,实时聊天

    需求:node做后端根据websocket,连接数据库,数据库的字段改变后,前端不用刷新页面也能更新到数据,前端也可以发送消息给后端,后端接受后把前端消息做处理再推送给前端展示 使用node ./app.js运行项目 在需要使用websocket连接的页面引入 默认如下: id为243 在数据库改为

    2024年02月15日
    浏览(48)
  • 微信小程序 | 基于小程序+Java+WebSocket实现实时聊天功能

    此文主要实现在小程序内聊天对话功能,使用Java作为后端语言进行支持,界面友好,开发简单。 2.1、注册微信公众平台账号。 2.2、下载安装IntelliJ IDEA(后端语言开发工具),Mysql数据库,微信Web开发者工具。 1.创建maven project 先创建一个名为SpringBootDemo的项目,选择【New Proje

    2024年02月02日
    浏览(54)
  • WebSocket协议理解并实现在线聊天

    写在前面 WebSocket 简称 ws 本文通过介绍ws,然后一步步的使用ws协议进行前后端开发测试,最后使用 SpringBoot 和 vue 利用ws协议达实现一个在线聊天室的小demo(源码在文章末尾)。 看完此篇后将能够完成这样的小demo (需要会使用springboot和vue2以及element-ui) WebSocket是在 HTML5 开

    2024年02月04日
    浏览(34)
  • thinkphp websocket 开发实时聊天系统的用户群组与订阅功能实现 (一)

    PHP开发实时聊天系统的用户群组与订阅功能实现 在当今社交互联网时代,实时聊天系统已经成为人们日常交流的重要工具。为了提供更好的用户体验,我们需要实现用户群组与订阅功能,使得用户能够方便地创建和加入群组,并且能够订阅感兴趣的内容。 本篇文章将介绍如

    2024年02月07日
    浏览(44)
  • 实现实时互动:用Spring Boot原生WebSocket打造你的专属聊天室

    😊 @ 作者: 一恍过去 💖 @ 主页: https://blog.csdn.net/zhuocailing3390 🎊 @ 社区: Java技术栈交流 🎉 @ 主题: 实现实时互动:用Spring Boot原生WebSocket打造你的专属聊天室 ⏱️ @ 创作时间: 2023年08月04日 WebSocket 实现聊天室的原理包括建立 WebSocket 连接的握手过程、保持连接状态以

    2024年02月10日
    浏览(50)
  • 微信小程序使用stomp.js实现STOMP传输协议的实时聊天

    简介: stomp.js:uniapp开发的小程序中使用 stomp.js:官网 stomp.js:GitHub 本来使用websocket,后端同事使用了stomp协议,导致前端也需要对应修改。 如何使用 在static/js中新建stomp.js和websocket.js,然后在需要使用的页面引入监听代码+发送代码即可 代码如下: 位置:项目/pages/static/

    2024年02月11日
    浏览(61)
  • uniapp微信小程序使用stomp.js实现STOMP传输协议的实时聊天

    简介: stomp.js:原生微信小程序中使用 stomp.js:官网 stomp.js:GitHub 本来使用websocket,后端同事使用了stomp协议,导致前端也需要对应修改。 如何使用 1.yarn add stompjs 2.版本 “stompjs”: “^2.3.3” 3.在static/js中新建websocket.js,然后在需要使用的页面引入监听代码+发送代码即可 代

    2024年02月11日
    浏览(44)
  • ASP.NET Core 中使用 WebSocket 协议进行实时通信

    介绍 在 ASP.NET Core 中使用 WebSocket 协议创建实时通信的完整示例涉及几个步骤。在此示例中,我们将创建一个简单的聊天应用程序,用户可以在其中实时发送和接收消息。此示例假设您对 ASP.NET Core 和 C# 有基本了解。 步骤1.创建一个新的ASP.NET Core项目 首先,使用 Visual Studio 或

    2024年01月25日
    浏览(51)
  • 前端(二十一)——WebSocket:实现实时双向数据传输的Web通信协议

    🤨博主:小猫娃来啦 🤨文章核心: WebSocket:实现实时双向数据传输的Web通信协议 在当今互联网时代,实时通信已成为很多应用的需求。为了满足这种需求,WebSocket协议被设计出来。WebSocket是一种基于TCP议的全双工通信协议,通过WebSocket,Web应用程序可以与服务器建立持久

    2024年02月04日
    浏览(63)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包