websocket+vue+node在线群聊

已于 2023-02-09 14:23:41 修改
阅读量734 收藏 3
点赞数 1
分类专栏： node vue 文章标签： websocket node websocket聊天 websocket群聊 node群聊
于 2019-11-01 16:39:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lemisi/article/details/102860262
版权

在这里插入图片描述
最近刚写了一个在线群聊的功能。
一个是vue页面；
一个是后台服务js；需要先下载ws

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <style>
  .after {
   
  display: flex;
}
.after .left .content {
   
  width: 500px;
  height: 300px;
  border: solid 1px red;
  overflow: scroll;
  overflow-x: hidden;
  padding: 0 20px;
}
.after .left .content .notice {
   
  text-align: center;
}
.after .left .content .myMessage {
   
  text-align: right;
}
.after .left .content .message {
   
  border: solid 2px black;
  display: inline-block;
}
.after .right {
   
  width: 200px;
  height: inherit;
  border: solid 1px blue;
}
.after .right .isMe {
   
  color: red;
}

</style>
</head>

<body>
  <div id="app">
    <!-- 先输入昵称 -->
    <div class="before" v-if="!ifEnter">
      <input v-model="userName" :value="userName" search enter-button="确定"
        placeholder="请输入您的昵称" />
        <button @click="settingName">确定</button>
    </div>
    <!-- 开始群聊 -->
    <div class="after" v-else>
      <div class="left">
        <!-- 聊天内容 -->
        <div class="content" id="content">
          <div v-for="(item,index) in messageList" :key="index">
            <!-- 加入群聊 -->
            <div class="notice" v-if="item.type=='addUser'">
              <h2>{
   {
   item.user}}加入群聊</h2>
            </div>
            <
最低0.47元/天 解锁文章
明月别枝
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue+Websocket简单在线聊天室
JIANG_BIRD40的博客
05-14 371
基于vue+websocket在线聊天室，话不多说，先上效果图 核心代码 服务端server.js 在这里插入代码片 const Ws = require('ws') var onlineCount = {type:2,count:0}; var allOnlineUser = {type:3,user:[]} ;((Ws)=>{ const server = new Ws.Server({ port:5000 }) const init = ()=>{ bindEvent()
Vue通过配置WebSocket并实现群聊功能
10-15
本篇文章将与各位开发者分享下 vue-native-websocket 库的使用以及配置，通过实例代码给大家分享Vue通过配置WebSocket并实现群聊功能，需要的朋友可以参考下
Node+Vue实现在线聊天
qq_41882832的博客
03-24 2514
socket.io在vue里面的使用
vue中使用websocket实现方法---详解
最新发布
m0_74079648的博客
07-22 1782
/定义window.dispatchEvent(new CustomEvent("事件名", {参数key:参数value}))//监听window.addEventListener("事件名", 参数key => {})
nodejs和前端基于websocket实现微信群聊与私聊
花子占爷的博客
12-14 2995
socket.io 模块 实现微信群聊与私聊
WebSocket服务器+vue
qq_34631220的博客
05-01 1569
php代码 <?php $server = new Swoole\WebSocket\Server("0.0.0.0", 10002); $server->on('open', function (Swoole\WebSocket\Server $server, $request) { echo "握手成功 fd{$request->fd}\n"; $datas = json_encode($request); $server->push($reques
Websocket+Vue学习
seven瓜的博客
03-05 260
1.Websocket初识 HTTP 协议有一个缺陷：通信只能由客户端发起，HTTP 协议做不到服务器主动向客户端推送信息。 而Websocket，浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。 当你获取 Web Socket 连接后，你可以通过send()方法来向服务器发送数据，并通过onmessage事件来接收服务器返回的数据。 2.Websocket实现 2.1 gradle依赖...
基于websocket+vue实现的网络聊天室
05-08
【作品名称】：基于websocket+vue实现的网络聊天室 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 运行客户端 npm run dev 运行...
SpringBoot+Vue实现的在线聊天系统 附带详细运行指导视频
08-12
项目描述：这是一个基于SpringBoot+Vue框架开发的在线聊天系统。首先，这是一个前后端分离的项目，代码简洁规范，注释说明详细，易于理解和学习。其次，这项目采用TS+Vue3.0+ElementUI-Plus搭建前端，项目大量使用...
Nodejs + WebSocket + Vue 实现多人聊天室- 第二章，web前端高级面试题
m0_63174529的博客
04-10 802
给大家分享一些关于HTML的面试题。一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！给大家分享一些关于HTML的面试题。[外链图片转存中…(img-ILCGhWhK-1712755930271)][外链图片转存中…(img-uQACWpbb-1712755930271)]一个人可以走的很快，但一群人才能走的更远。
Nodejs + Websocket 指定发送及群聊的实现
10-15
主要介绍了Nodejs + Websocket 指定发送及群聊的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Nodejs + WebSocket + Vue 一对一、一对多聊天室 - 第三章
2401_84003656的博客
04-04 885
/ 增加参数});} else {type: 2,// 增加参数});})console.log(“关闭连接”)});console.log(“异常关闭”)});console.log(“WebSocket建立完毕”)主体结构还是和第二章类型，不同的是：1、每次将uid对应的conn存储到一个对象conns上2、根据客户端传入的参数bridge来判断，是群发还是一对一发送3、群发还是第二章逻辑即可})
Node + WebSocket + Vue 聊天室创建群聊/加入群聊功能 – 第五章
田兴的博客
11-04 816
前言 本次算是做了一个小小的专题吧，“Nodejs + WebSocket + Vue实现聊天室功能”，目前还在一步一步推进，之前已经可以一对一、一对多聊天了，今天就来创建群聊组，加入群聊组等，同时项目中加入了全局message提示框，有兴趣的可以去看看。 如果您还没有看过之前的文字，请点击下方链接查看！ 推荐文章： WebSocket服务端 做出调整的地方有注释，后面也会做出讲解。 ... let users = []; let conns = {}; // 群组数组，多个群 let groups =
websocket+vue使用（简单例子）
buchishutiao的博客
03-01 3766
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。 当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。 目前大部分浏览器支持 WebSocket() 接口 看一下下面的例子： 需求：在一个表格中实时接收后端传过来的
vue+node.js实现聊天室应用
WishLostmymind的博客
06-20 302
在输入消息和按下发送按钮后，将把textbar里面消息在经过计算属性合并后通过socket.emit发送到服务器端，同时通过socket.on来监听消息，收到便把消息传入函数receiveMessage中，将收到的消息压入messages数组中，并在页面中显示。)将服务器配置好，并写入监听的消息，用io传递，并确定监听端口，记得打印错误信息方便找出错误。首先在命令行中使用“npm init vite@latest+项目名”语句来创建一个vue项目（这是使用vite来构建vue项目，记得安装依赖项）
Websocket：vue + node 实现实时通信
爱勇宝
07-31 1180
WebSocket对于每一个前端开发人员来说是必须要掌握的，以前遇到此类问题我会使用轮询。但轮询有它自己的缺点，这里不进行赘述，希望自己能越来越好，也希望我写的笔记能给解开你的燃眉之急。...
使用websocket+vue写一个小demo
m0_71519607的博客
06-01 224
这只是一个简单的demo，可以根据需求进行扩展和美化。
vue 实现websocket
sunyiuhang的博客
01-11 742
import SockJS from "sockjs-client"; import Stomp from "stompjs"; // 入参为 socket url地址 监听的topic 以及需要传给后台的信息info export default class socket{ constructor(topic,url){ this.url = url || process.env.VUE_APP_BASE_URL; this.topic = topic; .
websocket+vue2
11-18
WebSocket是一种在单个TCP连接上进行全双工通信的协议。Vue.js是一个流行的JavaScript框架，用于构建用户界面。在Vue.js中使用WebSocket可以实现实时数据更新，下面是一个简单的示例： 1.安装vue-native-websocket插件 ```shell npm install vue-native-websocket --save ``` 2.在main.js中引入并使用插件 ```javascript import VueNativeSock from 'vue-native-websocket' Vue.use(VueNativeSock, 'ws://localhost:8080', { reconnection: true, // 是否自动重连 reconnectionAttempts: 5, // 重连次数 reconnectionDelay: 3000 // 重连间隔时间 }) ``` 3.在Vue组件中使用WebSocket ```javascript export default { data () { return { message: '' } }, mounted () { this.$options.sockets.onmessage = (event) => { this.message = event.data } } } ``` 在上面的代码中，我们使用了vue-native-websocket插件来连接WebSocket服务器。在Vue组件中，我们使用了onmessage事件来监听WebSocket服务器发送的消息，并将其存储在组件的data中。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值