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代码

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

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