uni-app里使用webscoket

实现思路和vue中是一样的。如果想看思路可以看这篇文章：websocket

直接上可以运行的代码：

一、后端nodeJS代码：

1、新建项目文件夹

2、初始化项目：

npm init -y

3、项目里安装ws

npm i ws --save

4、nodeJS代码：

chat.js

const WsServer = require("ws").Server;

// 创建webscoket的服务器对象
const server = new WsServer({ port: 9000 });

// 绑定connection事件（当有浏览器端连接时，会触发）

let allClient = []; //保存着所有的客户端

server.on("connection", (client) => {
  console.log("有人连接了");
  // 保存连接的客户端
  allClient.push(client);
  console.log("allClient.length", allClient.length);

  // 给所有客户端发送人数：
  sendCount();

  // 给当前客户端对象绑定message事件（当前该客户端给服务器发送消息时，触发
  client.on("message", (str) => {
    console.log("有人发了消息",str);
    // 把收到的消息转发给其它客户端
    sendMsg(client,str);
  });

  client.on("close", () => {
    sendMsg(client,"有人退出了");
    allClient = allClient.filter((item) => item != client);
    sendCount();
  });
});
// 发送消息
function sendMsg(client,content) {
  allClient.forEach((item) => {
    if (item != client) {
      item.send(JSON.stringify({
        status: "msg",
        content,
      }));
    }
  });
}

// 发送人数
function sendCount() {
  allClient.forEach((item) => {
    item.send(JSON.stringify({
        status: "count",
        count: allClient.length,
      }));
  });
}

5、运行后端项目：

nodemon chat

二、前端uni-app代码

1、uni-app代码

<template>
    <view>
        <view>聊天：在线人数：{{count}}</view>
        <view class="chat-box" v-html="allmsg"></view>
        <input v-model="msg" />
        <button @click="sendMsg">发送</button>
        <button @click="exitChat">退出聊天</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                allmsg: "",
                msg: "",
                count: 0
            }
        },
        onLoad() {
            const socketTask = uni.connectSocket({
                url: "ws://127.0.0.1:9000/",
                success() {

                }
            });
            console.log("socketTask", socketTask);

            uni.onSocketOpen(() => {
                console.log("服务器已经打开链接");
                // ws.send("大家好，我是新来的");
                uni.sendSocketMessage({
                    data: "大家好，我是通过uni来的"
                })
            })

            uni.onSocketMessage((res) => {
                console.log('收到服务器内容：' + res.data);
                // this.allmsg += `<view>${res.data}</view>`;

                const obj = JSON.parse(res.data);
                if (obj.status == "msg") {
                    console.log("typeof obj.content", typeof obj.content);
                    console.log("obj.content", obj.content);
                    this.allmsg += `<view>${this.blobToStr(obj.content.data)}</view>`;
                    
                } else if (obj.status === "count") {
                    console.log("obj.count", obj.count);
                    this.count = obj.count;
                }
            })
        },
        methods: {
            exitChat(){
                uni.closeSocket();
            },
            blobToStr(data) {
                var enc = new TextDecoder("utf-8");
                var arr = new Uint8Array(data);
                return enc.decode(arr)
            },
            sendMsg() {
                uni.sendSocketMessage({
                    data: this.msg
                })
            }
        }
    }
</script>

<style scoped>
    .chat-box {
        width: 100%;
        height: 800rpx;
        border: 1px solid red;
    }
</style>

2、运行项目，界面如下：

解释：当打开前端页面时，后端的socket会自动连接上