今天写了一下,使用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);
}
});
});
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有