uniapp 中实现socket通信的方法

用户9914333

发布于 2024-01-12 18:46:55

1.4K0

发布于 2024-01-12 18:46:55

文章被收录于专栏：bug收集bug收集

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

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

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

客户端(uniapp)

代码如下：

<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;

//------------------------下面是关于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 删除

客户端