wxml

<view class="message">
  <text wx:for="{{message}}" wx:key="index" class="{{item.type=='me'?'me':'other'}},we">
      <text>{{item.content}}</text>
  </text>
</view>
<view class="inputBox">
<input type="text" value="{{value}}" bindinput="inputValue"	confirm-type="search" bindconfirm="enter"/>
<button bindtap="send">发送</button>
</view>

js

// pages/websocket/websocket.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        value: null,
        message: [],
    },
    inputValue(e) {
        this.setData({
            value: e.detail.value,
        })
    },
    enter(){
      this.send()
    },
    //发送
    send() {
        //发送消息
        wx.sendSocketMessage({
            data: this.data.value,
            success: res => {
                console.log('发送成功');
            },
            fail: err => {
                console.log('发送失败');
            }
        })
        //收集自己发送的消息
        let message = this.data.value
        this.data.message.push({
            type: "me",
            content: message
        })
        this.setData({
            message: this.data.message,
            value: ""
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        //收集别人发送的消息
        wx.onSocketMessage((res) => {
            let message = this.data.message
            //把ArrayBuffer对象，转成字符串
            const decoder = new TextDecoder()
            const str = decoder.decode(res.data)
            message.push({
                type:"other",
                content:str
            })
            this.setData({
               message 
            })
        })
    },
})

wxss

.inputBox {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100rpx;
  background-color: #ccc;
  display: flex;
  box-sizing: border-box;
  padding: 20rpx;
  align-items: center;
}
.inputBox>input {
  width: 80%;
  background-color: #fff;
  height: 100%;
  border-radius: 50rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
}
.inputBox>button {
  background-color: #07bc54;
  color: #fff;
  padding: 0;
  margin: 0;
  height: 100%;
  font-size: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  margin-left: 20rpx;
}
Page {
  background-color: #eee;
}
.message {
  display: flex;
  flex-direction: column;
  overflow: auto;
  margin-bottom: 100rpx;
}
.we {
  margin: 20rpx 10rpx 0;
}
.me {
  background-color: #07bc54;
  color: #fff;
  padding: 10rpx;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
}
.other {
  background-color: #fff;
  color: #000;
  padding: 10rpx;
  border-radius: 50rpx;
}

一、在app.js与服务器建立连接

 //与服务器建立长链接
        wx.connectSocket({
            url: "服务器地址",
            success: res => {
                console.log('连接成功');
            },
            fail: err => {
                console.log(err);
                console.log('连接失败');
            }
        })
    

二、收集自己发送的信息

//发送
    send() {
        //发送消息
        wx.sendSocketMessage({
            data: this.data.value,
            success: res => {
            //收集自己发送的消息
            let message = this.data.value
            this.data.message.push({
                type: "me",
                content: message
            })
            this.setData({
                message: this.data.message,
                value: ""
            };
            console.log('发送成功')；
            },
            fail: err => {
                console.log('发送失败');
            }
        })

    },

三、收集对方发送的消息

//收集别人发送的消息
        wx.onSocketMessage((res) => {
            let message = this.data.message
            //把ArrayBuffer对象，转成字符串
            const decoder = new TextDecoder()
            const str = decoder.decode(res.data)
            message.push({
                type:"other",
                content:str
            })
            this.setData({
               message 
            })
        })