基于node+vue实现简单的WebSocket聊天功能

2024-12-01 07:25:47

首先，我需要用到node的nodejs-websocket模块

使用yarn进行安装

yarn add nodejs-websocket --save

当然，你也可以用npm进行安装

npm i nodejs-websocket --save

安装完毕之后，我们开始写服务端的代码，首先，我用node在本地起了一个node服务器用来开启websocket服务

sock.js:

let ws = require("nodejs-websocket");
console.log("开始建立链接");
ws.createServer(function (conn) {
 conn.on("text", function (str) {
  console.log("收到的信息为", str);
   conn.send(`${str}（机器人`)
 });
 conn.on("close", function (code, reason) {
  console.log("关闭连接")
 });
 conn.on("error", function (code, reason) {
  console.log("异常关闭")
 })
}).listen(8001);
console.log("链接建立完毕");

服务端主要是用nodejs-websocket用来开启服务，以及返回前端需要的值，这里我只是做了一个简单的处理，在接受值得后面加了一个‘机器人'的string,

然后，我们需要开启这个node服务，

命令后面的路径一定要找对，我是把sock.js放在了根目录的socket文件夹下面

执行

yarn socket　　

最后，看我们的客户端，客户端我是想有一个输入框，然后有个聊天框：

<template>
 <div class="test3">
  <div class="msg" ref="box">
   <div v-for="item in list" :class="[item.type,'msg-item']">
    <p>
     {{item.content}}
    </p>
   </div>
  </div>
  <div class="input-group">
   <input type="text" v-model="contentText">
   <button @click="sendText">发送</button>
  </div>
 </div>
</template>

<script>
 export default {
  name: "index3",
  data() {
   return {
    list: [],//聊天记录的数组
    contentText: "",//input输入的值
   }
  },
  methods: {
   //发送聊天信息
    sendText() {
    let that = this;
    this.list = [...this.list, {type: "mine", content: this.contentText}];//通过type字段进行区分是自己（mine）发的还是系统（robot）返回的
    this.backText(function () {
     that.contentText = "";//加回调在得到返回数据的时候清除输入框的内容
    });
   },
   backText(callback) {
    let that = this;
    if (window.WebSocket) {
     let ws = new WebSocket("ws://192.168.11.169:8001");
     ws.onopen = function (e) {
      console.log("链接服务器成功");
      console.log("that.contentText is", that.contentText);
      ws.send(that.contentText);
      callback();
     };
     ws.onclose = function (e) {
      console.log("服务器关闭")
     };
     ws.onerror = function () {
      console.log("服务器出错")
     };
     ws.onmessage = function (e) {
      that.list = [...that.list, {type: "robot", content: e.data}]
     }
    }
   }
  },
  watch: {
   //监听list,当有修改的时候进行div的屏幕滚动，确保能看到最新的聊天
   list: function () {
    let that = this;
    setTimeout(() => {
     that.$refs.box.scrollTop = that.$refs.box.scrollHeight;
    }, 0);
    //加setTimeout的原因：由于vue采用虚拟dom，我每次生成新的消息时获取到的div的scrollHeight的值是生成新消息之前的值，所以造成每次都是最新的那条消息被隐藏掉了
   }
  },
  mounted() {
  }
 };

</script>

<style scoped lang="scss">
 .test3 {
  text-align: center;
 }

 .msg {
  width: 100px;
  height: 100px;
  overflow: auto;
  padding-top: 5px;
  border: 1px solid red;
  display: inline-block;
  margin-bottom: 6px;

  .msg-item {
   position: relative;
   overflow: hidden;
   p {
    display: inline-block;
    border-radius: 40px;
    background: #3C3D5A;
    color: white;
    float: left;
    padding: 2px 12px;
    margin: 0 0 2px 0;
    max-width: 70%;
    text-align: left;
    box-sizing: border-box;
   }

   &.mine {
    p {
     float: right;
     background: aquamarine;
     color: white;
    }
   }
  }
 }
</style>

看一下最终效果：

vue 实现websocket发送消息并实时接收消息

公司做了个数字货币行情的H5,需要用到websocket,刚好自己也不会,可以学习一下,美滋滋. 项目结合vue脚手架和websocket来搭建,主要遇到了两个问题,一个是:断开重连机制要如何处理:另外一个是:如何在页面上随时的发送消息并实时接收返回的数据,断开重连后又如何重新发送消息,接收消息一.断开重连机制处理 (详细参考这里) 写一个重连的方法(重连方法中必须加一把锁,重连方法执行过程中不再执行重连动作,避免重复连接),然后在websocket的onclose和error中绑定重连方法,
Django+Vue实现WebSocket连接的示例代码

近期有一需求:前端页面点击执行任务,实时显示后端执行情况,思考一波:发现 WebSocket 最适合做这件事. 效果测试 ping www.baidu.com 效果点击连接建立ws连接后端实现所需软件包后端主要借助Django Channels 实现socket连接,官网文档链接这里想实现每个连接进来加入组进行广播,所以还需要引入 channels-redis . pip channels==2.2.0 channels-redis==2.4.0 引入 settings.py INS
Vue通过配置WebSocket并实现群聊功能

原文链接:https://juejin.im/post/5e08d53a6fb9a0162b7f4bad 写JQuery项目时,使用websocket很简单,不用去考虑模块化,组件之间的访问问题,面向文档编程即可,在Vue项目中使用时,远远没有想象中的那么简单,需要考虑很多场景,本篇文章将与各位开发者分享下 vue-native-websocket 库的使用以及配置,用其实现群聊功能.先看下最终实现的效果安装依赖本文中对于 vue-native-websocket 库的讲解,项目中配置了vu
vue使用websocket的方法实例分析

本文实例讲述了vue使用websocket的方法.分享给大家供大家参考,具体如下: 最近项目需要使用到websocket 但是框架是vue 网上查阅很多资料 vue-websocket 老是连接不上索性就不适用封装的插件了,直接使用原生的websocket 我这边需求是只需要接受就好不需要发送代码如下: 爬坑之路:vue里面this指向问题第一版使用原生js mounted(){ console.log(this)---------------------------------
Vue通过WebSocket建立长连接的实现代码

使用场景: 在项目开发中,后端需要处理一连串的逻辑,或者等待第三方的数据返回来进行处理之后在返回给前端,可能时间会很长,而且前端也不知道后端什么时候能处理好(时间长的话会达到10分钟左右),如果采用普通的HTTP连接,前后端无法一直保持联系,麻烦的时候可能还需要采用轮询的机制,所以使用WebSocket连接效果还是比较好的. 使用时间: 在界面加载完之后,建上WebSocket连接,此时前端还可以发送普通的HTTP的请求,等到后端处理完之后,通过建立的WebSocket连接返给前端,前端根据返回
websocket在springboot+vue中的使用教程

1.websocket在springboot中的一种实现在java后台中,websocket是作为一种服务端配置,其配置如下 @Configuration public class WebSocketConfig { @Bean(name="serverEndpointExporter") public ServerEndpointExporter getServerEndpointExporterBean(){ return new ServerEndpointExporter()
vue发送websocket请求和http post请求的实例代码

先给大家介绍下vue发送websocket请求和http post请求直接上代码: pdf.vue <script> import SockJS from 'sockjs-client'; import Stomp from 'stompjs'; import qs from "qs" export default { name: "pdf", data() { return { newsData: [], tagGuid_mx: "&quo
基于vue和websocket的多人在线聊天室

最近看到一些关于websocket的东西,就决定写一个在线聊天室尝试一下.最终决定配合vue来写,采用了官方的vue脚手架vue-cli和官方的router,在本例中呢,我是用了CHAT这个对象来存储app的数据的,但后来一想,虽然项目很小,但如果用官方的vuex会更好,方便以后扩展,比如可以加上私信功能,可以在对方不在线的时候缓存发送的消息,这些都是可以的.(现在比较尴尬的就是,我把聊天室写好放到公众号号redream里,但是很少有人会同时在线,所以你会经常发现你进去的时候只有你一个人,就导致
在vue中使用SockJS实现webSocket通信的过程

最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些帮助.废话少说,下面我就来讲一下我的实现过程: socksjs •客户端和服务器端api尽可能简洁,尽量靠近websocket api •支持服务端扩展和负载均衡技术 •传输层应该全面支持跨域通信 •如果受到代理服务器的限制,传输层能优雅地从一种方式回退到另一种方式 •尽可能快地建立连接 •客户端只是纯
基于node+vue实现简单的WebSocket聊天功能

首先,我需要用到node的nodejs-websocket模块使用yarn进行安装 yarn add nodejs-websocket --save 当然,你也可以用npm进行安装 npm i nodejs-websocket --save 安装完毕之后,我们开始写服务端的代码,首先,我用node在本地起了一个node服务器用来开启websocket服务 sock.js: let ws = require("nodejs-websocket"); console.log("
基于PHP实现一个简单的在线聊天功能

目录前端页面数据库实现思路 1.showPage() 2.newChat() 3.getChatText() 4.getChatTemp() 5.pushChat() 总结要实现功能,首先要做前端,经过对比其他网站的在线聊天功能,发现除了基本的聊天功能以外,还要注意以下几点. 一次只能和一个人聊天,但是可以随意切换其他人. 如果用户是从"发送消息" 入口进来的,那么当前马上就切换到对应的聊天窗口,而且如果之前有过聊天记录,应该把聊天记录也展示出来. 如果是从"我的消息
nodejs基于WS模块实现WebSocket聊天功能的方法

本文实例讲述了nodejs基于WS模块实现WebSocket聊天功能的方法.分享给大家供大家参考,具体如下: WebSocket 模块众多,我选择了一个较为简单的模块进行了实现. 工具:Sublime 技术:Node.js 引用模块 ws 最终效果如下本来打算制作网络画板,因为工作忘记了,这里就简单实现了群聊功能没什么好介绍的,网上代码案例太多了,(各位新手主要碰见的问题,可能也就是 node 导入模块问题了) 介绍一下安装模块: 找到安装node 目录,进入到 npm 目录下运行
Android基于socket实现的简单C/S聊天通信功能

本文实例讲述了Android基于socket实现的简单C/S聊天通信功能.分享给大家供大家参考,具体如下: 主要想法:在客户端上发送一条信息,在后台开辟一个线程充当服务端,收到消息就立即回馈给客户端. 第一步:创建一个继续Activity的SocketClientActity类,包为com.pku.net 编写布局文件socketclient.xml,代码如下: <?xml version="1.0" encoding="utf-8"?> <Lin
golang实现一个简单的websocket聊天室功能

基本原理: 1.引入了 golang.org/x/net/websocket 包. 2.监听端口. 3.客户端连接时,发送结构体: {"type":"login","uid":"我是用户名","msg":"登陆成功"}' .服务端根据login信息,维护一个map,用来存放不同用户的连接体. 4.有用户发言时,将msg内容轮询发给给一个用户. 5.客户端使用js websocket功能,
JavaScript基于DOM操作实现简单的数学运算功能示例

本文实例讲述了JavaScript基于DOM操作实现简单的数学运算功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
基于Java Socket实现一个简易在线聊天功能（一）

最近做了一个项目,其中有一个在线网页交流的需求,好久没写代码了,手都生疏了,于是先写demo练练手,分享到我们平台,以此做个记录,方便自己和大家使用. 先给大家说下实现步骤分这样几大步: 1.使用awt组件和socket实现简单的单客户端向服务端持续发送消息: 2.结合线程,实现多客户端连接服务端发送消息: 3.实现服务端转发客户端消息至所有客户端,同时在客户端显示: 4.把awt组件生成的窗口界面改成前端jsp或者html展示的界面,java socket实现的客户端改为前端技术实现. 这里首
vue实现的微信机器人聊天功能案例【附源码下载】

本文实例讲述了vue实现的微信机器人聊天功能.分享给大家供大家参考,具体如下: 先看效果: 实现过程: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5模拟微信聊天界面</title> <style> /**重置标签默认样式*/ * { margin: 0; padding: 0; list-style: none; fo
node.js实现简单的压缩/解压缩功能示例

本文实例讲述了node.js实现简单的压缩/解压缩功能.分享给大家供大家参考,具体如下: 压缩的例子非常简单的几行代码,就完成了本地文件的gzip压缩. var fs = require('fs'); var zlib = require('zlib'); var gzip = zlib.createGzip(); var inFile = fs.createReadStream('./extra/fileForCompress.txt'); var out = fs.createWriteS
Vue实现简单的发表评论功能

本文实例为大家分享了Vue实现简单的发表评论功能的具体代码,供大家参考,具体内容如下 1.这是我在学习中的实例,有些的不足的地方,还望各位大佬指点,感谢哦~ 2.发表评论的效果图点击"发表"之后的效果(每条评论之后点击"删除"可以删掉这一整条评论~) 3.完整代码展示(我html结构写的比较乱,这里提醒大家一下,没有定义类的div是可以删掉的,我是因为方便写样式所以多加了div) 还是要提醒一下,不要忘记引入vue.js,目录记得根据自己存放的位置改 <!D

基于node+vue实现简单的WebSocket聊天功能

相关推荐

随机推荐