微信小程序中websocket的使用----简易聊天室demo

最新推荐文章于 2024-07-10 16:27:14 发布

氟西汀835

最新推荐文章于 2024-07-10 16:27:14 发布

阅读量865

点赞数 1

分类专栏：微信小程序 websocket 文章标签：微信小程序 websocket 小程序

本文链接：https://blog.csdn.net/weixin_69567401/article/details/129836410

版权

微信小程序同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

websocket

1 篇文章 0 订阅

订阅专栏

该文章介绍了如何使用WebSocket库创建一个简单的聊天服务器，监听客户端连接并处理接收到的消息。客户端通过发送JSON格式的数据与服务器交互，页面展示聊天记录。同时，提供了微信小程序端的代码示例，展示如何连接WebSocket，发送和接收消息。

摘要由CSDN通过智能技术生成

服务端代码:首先我们需要去安装依赖 webSocket --- npm i ws

一、导入webSocket 设置端口号

二、监听客户端是否连接，接收客户端发送的消息

三、监听到客户端发送的消息，对数据进行处理，转换成JSON格式

四、将收到的消息发送出去

// webSocket/index.js
// const Mock = require("mockjs");
// 首先引入webSocket,创建一个服务器
let Ws = require("ws").Server;
// 设置端口号
let wss = new Ws({
  port: 8283,
});
// 监听是否有连接 接入
wss.on("connection", function (ws) {
  console.log("有连接");
  // 前端发过来的消息
  ws.on("message", (res) => {
    console.log(res);
    console.log(res.toString("utf-8"))
    const string = res.toString("utf-8");
    console.log(JSON.parse(string));
    // 发送数据
    ws.send(string);
  });
});
console.log("server is running port:8283");

客户端：主要发送消息处理服务器返回的数据

页面：

<view class="container log-list">
  <input type="text" style="border: 1px red solid;" model:value="{{readValues1}}" />
  <button bindtap="sendMessage1" data-value="甲">甲</button>
  <input type="text" style="border: 1px red solid;" model:value="{{readValues2}}" />
  <button bindtap="sendMessage2" data-value="乙">乙</button>
  <view style="width: 100%;">
    <block wx:for="{{message}}" wx:key="index" style="width: 100%;">
      <view class="talk">
        <view class="{{item.name =='甲' ? 'active' : 'active1' }}">
          {{item.name}}
        </view>
        <view class="{{item.name =='甲'? 'active' : 'active1' }}">
          <text>{{item.msg}}</text>{{index+1}}
        </view>
        <!-- </view> -->
      </view>
    </block>
  </view>

页面效果：

js:首先定义数据



  data: {
    logs: [],
    readValues2: '', // 乙绑定的值
    readValues1: '', // 甲绑定的值
    obj: {
      name: '1',
      msg: '2'
    },
    message: []
  },

一、在页面显示的时候建立连接，接收消息

  wx.connectSocket({
      url: 'ws://localhost:8283',
      success(res) {
        console.log(res)
        console.log('WebSocket 连接成功');
      },
      fail(err) {
        console.error('WebSocket 连接失败', err);
      }
    });
    wx.onSocketOpen((result) => {
      console.log("连接成功");
    })
    wx.onSocketMessage((result) => {
      // var taht
      console.log(result.data)
      this.data.message.push(JSON.parse(result.data))
      console.log(this.data.message)
      this.setData({
        message: this.data.message // 将收到的消息存到数组里卖弄
      })
    })

二、发送消息

  sendMessage1(e) { // 甲发送的消息
    console.log(e.currentTarget.dataset.value) // 获取按钮的值，用来判断是谁发送的消息
    let aa = this.data.readValues1
    this.setData({
      obj: { // 这里name: 乙  msg:发送的消息
        name: e.currentTarget.dataset.value,
        msg: aa
      }
    })
    console.log(aa)
    wx.sendSocketMessage({
      data: JSON.stringify(this.data.obj) // 将对象想换成JSON字符串发送到服务器
    })
  },
  sendMessage2(e) { // 乙发送的消息
    console.log(e.currentTarget.dataset.value) // 获取按钮的值，用来判断是谁发送的消息
    let aa = this.data.readValues2
    this.setData({
      obj: { // 这里name:乙  msg:发送的消息
        name: e.currentTarget.dataset.value,
        msg: aa
      }
    })
    wx.sendSocketMessage({
      data: JSON.stringify(this.data.obj)// 将对象想换成JSON字符串发送到服务器
    })
  },

最后接下来，只要使用node 将服务跑起来就行，就能够实现一个简易的聊天的，更多的没有去多写一些东西；