前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >uniapp 中实现socket通信的方法

uniapp 中实现socket通信的方法

作者头像
用户9914333
发布于 2024-01-12 10:46:55
发布于 2024-01-12 10:46:55
2.5K00
代码可运行
举报
文章被收录于专栏:bug收集bug收集
运行总次数:0
代码可运行

今天写了一下,使用uniapp 进行socket连接,基本完成了。

代码在文章下面,但还是有个bug没有解决:v-html显示消息列表时,在微信小程序中显示不了。但网页测试又是正常的。

ps: 写了一天代码了,脑袋有点懵懵的,改天再来解决这个bug吧

客户端(uniapp)

代码如下:

代码语言:javascript
代码运行次数:0
运行
复制
<template>
<view>

<view>
      留言列表
</view>
<!-- <scroll-view scroll-y="true" class=""  style="border: 1pxs solid black; height: 600rpx;"> -->
<view class="" v-html="list">
</view>
<!-- </scroll-view> -->
    <input type="text" v-model="message" placeholder="请输入消息" />
<button @click="sendMessage">发送</button>
</view>
</template>

<script>
export default {
    data() {
      return {
        message:"",
        list:"<view>留言信息</view>"
      }
    },
    onLoad(){
      this.socket();
    },
    methods: {
      sendMessage(){
         uni.sendSocketMessage({
            data:JSON.stringify({data:this.message,type:"test"})
         })
      },
      socket(){
          var that = this;
          //建立socket连接
                  uni.connectSocket({
          url:"ws://192.168.0.111:9999",
          header:{
          "content-type":"application/json"
          },
          success(res) {
                console.log("连接建立成功");
                //成功后,打开连接
               uni.onSocketOpen((res) => {
                  console.log("已打开");
              });


             //监听WebSocket接收到服务器的消息事件。
              uni.onSocketMessage( (res) => {
                  let getmsg=JSON.parse(res.data);
                  
                  that.list= that.list +"<view>"+getmsg.data+"</view>";
              });
          }
        });
      }
    }
  }
</script>

服务端(nodejs)

需要:单独创建socket 服务

服务端使用的是nodejs 实现,下载的模块为ws

var ws = require("ws").Server;

注:

ip 地址为本机的ip ;

客户端在建立socket 连接时,要保证ip地址与端口相同

socket端口号和后端程序的商品号是不同的

cons[i].send(data.toString()); 这语句代码要注意,接收到的data是Buffer对象不转成字符串的话,客户端就是进行数据处理类型是ArrayBuffer;

代码语言:javascript
代码运行次数:0
运行
复制
//------------------------下面是关于socket服务端相关内容-------------



var cons = new Array(); //数组,用户存储与客户的连接

var server = new ws({host:"192.168.0.111",port:9999}); //创建一个ws的地址,注意,这个地址就是客户端请求的socket服务端的地址

//给服务的连接事件,添加对应的方法 

server.on('connection',function(ws){

console.log('new connection founded successfully');

    cons.push(ws); // 每当建立一个连接成功后,就将这个连接加入到数组中

    ws.on('message',function(data){ //得到客户端发送的消息的事件处理

for(var i=0;i<cons.length;i++){

// console.log(data);

 cons[i].send(data.toString()); //将得到的数据,发送到每一个客户端

console.log("接收到数据:"+data);

        }

    });

    ws.on('close',function(){ //当关闭一个连接时的处理

for(var i=0;i<cons.length;i++){

if(cons[i] == ws) cons.splice(i,1);

        }

    });

});
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2024-01-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 bug收集 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
uniapp使用WebSocket实现即时通讯
WebSocket是一种基于TCP协议的全双工通信协议,它可以在客户端和服务器之间建立一个持久性的连接,实现实时通信。在uniapp中,我们可以使用uni-socketio插件来实现WebSocket的功能。
超级小可爱
2023/10/18
4.4K0
WebSocket 基础与应用系列 —— 抓个 WebSocket 的包
在传统的 Web 中,要实现实时通信,通用的方式是采用 HTTP 协议不断发送请求,即轮询(Polling)。
程序员海军
2021/10/11
1.3K0
WebSocket 基础与应用系列 ——  抓个 WebSocket 的包
socket心跳检测
以下是一个简单的示例代码,用于在前后端之间进行基本的心跳检测。 前端代码(使用 JavaScript):
程序员王天
2023/10/18
5840
利用whistle调试WebSocket和Socket请求
whistle v1.6.0 (Github地址:https://github.com/avwo/whistle) 开始支持WebSocket和一般Socket的抓包、构造请求、以及修改发送或接收的数
IMWeb前端团队
2017/12/28
4.8K0
利用whistle调试WebSocket和Socket请求
Socket的讲解
伙伴们,如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信:IsZhangjianhao,邀你进我的前端学习交流群,一起学习前端,成为更优秀的工程师~
zayyo
2023/11/18
2191
2万字长文肝了一个实时聊天室,只为让她学会websocket
看演示不过瘾,我也玩一下(http://socket.vjscoder.com/websocket-chatroom/index.html#/)
前端胖头鱼
2022/07/25
9930
2万字长文肝了一个实时聊天室,只为让她学会websocket
前端架构师破局技能,NodeJS 落地 WebSocket 实践
本文从网络协议,技术背景,安全和生产应用的方向,详细介绍 WebSocket 在 Node.js 中的落地实践。
杨成功
2022/03/09
1.9K0
前端架构师破局技能,NodeJS 落地 WebSocket 实践
webSocket和EventSource的区别
WebSocket和EventSource是两种在Web应用程序中用于实现实时通信的不同技术。WebSocket是一种双向通信协议,允许服务器与客户端建立持久性连接并通过该连接发送消息。而EventSource是一种服务器推送技术,只允许服务器向客户端发送消息,而不允许客户端向服务器发送消息。 在下面的描述中,我将详细介绍WebSocket和EventSource的不同之处,并提供一些代码示例。
世间万物皆对象
2024/03/20
4190
as3与node.js的socket通信
SocketManager最多在连接失败时,进行5次重连。建立socket连接代码:
meteoric
2018/11/16
1K0
Web的socket与C# socket相互通信
web端代码就是js代码,C#有两种方式:使用第三方库,如Fleck,使用C#原生socket编程实现
郑子铭
2023/08/29
2860
Web的socket与C# socket相互通信
使用 WebSocket 实现跨域 iframe 通信
本文是使用 WebSocket 实现跨域 iframe 通信思路实现了一个本地 Demo,功能有:
草帽lufei
2024/05/08
3760
使用 WebSocket 实现跨域 iframe 通信
5000字!带你零距离接触websocket!
原文 https://juejin.im/post/6876301731966713869
lucifer210
2020/10/23
5240
5000字!带你零距离接触websocket!
基于uniapp+deepseek+vue3跨平台ai流式对话
基于uniapp+vue3集成deepseek-v3实战跨端流式输出AI对话系统。支持暗黑+亮色模式、代码高亮、本地会话存储等功能。支持编译到小程序+h5+app端。
andy2018
2025/05/06
7190
基于uniapp+deepseek+vue3跨平台ai流式对话
性能测试之微信小程序websocket协议
最近复习性能测试,也想看看小程序聊天页面中的信息底层是怎么实现的,今天试着写了写。
高楼Zee
2019/12/27
1K0
性能测试之微信小程序websocket协议
1分钟创建一个实时通信应用
1. OpenAI使用GPT-4 LLM进行内容审核,警告不要有偏见,该公司希望在人类参与循环的情况下消除训练期间引入的不良偏见。
希里安
2023/10/30
2020
1分钟创建一个实时通信应用
基于 socket.io 快速实现一个实时通讯应用WebSocket概念实现用socket.io实现一个实时接收信息的例子分析webSocket协议参考文章
随着web技术的发展,使用场景和需求也越来越复杂,客户端不再满足于简单的请求得到状态的需求。实时通讯越来越多应用于各个领域。
用户2356368
2019/05/07
2.6K0
基于 socket.io 快速实现一个实时通讯应用WebSocket概念实现用socket.io实现一个实时接收信息的例子分析webSocket协议参考文章
websocket深入浅出
答: 它是一种网络通信协议,是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
全栈程序员站长
2022/09/14
2.3K0
websocket深入浅出
socket.io搭配pm2(cluster)集群解决方案
socket.io与cluster 在线上系统中,需要使用node的多进程模型,我们可以自己实现简易的基于cluster模式的socket分发模型,也可以使用比较稳定的pm2这样进程管理工具。在常规的http服务中,这套模式一切正常,可是一旦server中集成了socket.io服务就会导致ws通道建立失败,即使通过backup的polling方式仍会出现时断时连的现象,因此我们需要解决这种问题,让socket.io充分利用多核。 在这里之所以提到socket.io而未说websocket服务,是因为so
欲休
2018/03/15
6K1
socket.io搭配pm2(cluster)集群解决方案
RPC远程调用浏览器函数
早闻 RPC(Remote Procedure Call)远程过程调用,这一词了,应该是在安卓逆向的时候听闻的,当时吹嘘的意思是这样的,通过另一个远端服务器来调用安卓代码中的函数,并将执行后的结果返回。比如有一个加密算法,如果要实现脱机(脱离当前环境)运行的话,就需要扣除相对应的代码,补齐对应的环境(模块,上下文,语言),然而要在补齐该加密算法的环境可不好实现,而通过 RPC 则可以免除扣代码,通过数据通信来达到远程调用的目的,听起来是挺牛逼的,实际上也确实挺骚的。这里我将以浏览器与本地搭建一个 websocket 来实现调用浏览器内的函数。
愧怍
2022/12/27
1.1K0
RPC远程调用浏览器函数
基于 socket.io 快速实现一个实时通讯应用
随着web技术的发展,使用场景和需求也越来越复杂,客户端不再满足于简单的请求得到状态的需求。实时通讯越来越多应用于各个领域。
用户2356368
2022/04/07
1.7K0
基于 socket.io 快速实现一个实时通讯应用
相关推荐
uniapp使用WebSocket实现即时通讯
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验