uniapp websocket 实现聊天室代码

以下是使用uniapp框架实现websocket聊天室的示例代码：

1. 创建uniapp项目，打开HBuilderX，新建uniapp项目。选择“空模板”，输入项目名称，选择存储路径，点击创建。

2. 安装依赖，打开控制台，输入以下命令安装依赖：

npm install --save socket.io-client

3. 创建聊天室页面，创建一个页面，用于展示聊天室界面。在pages目录下新建chatroom目录，并创建chatroom.vue文件。在chatroom.vue文件中编写聊天室界面代码，如下所示：

<template>
  <view class="container">
    <scroll-view class="chat-box" scroll-into-view="{{scrollIntoView}}" scroll-y="true">
      <view class="chat-item" v-for="(message, index) in messages" :key="index">
        <text class="chat-username">{{message.username}}：</text>
        <text class="chat-content">{{message.content}}</text>
      </view>
    </scroll-view>
    <form class="chat-form" @submit.prevent="sendMessage">
      <input type="text" v-model="message" placeholder="请输入聊天内容">
      <button type="submit">发送</button>
    </form>
  </view>
</template>

<script>
import io from 'socket.io-client'

export default {
  data() {
    return {
      socket: null,
      username: '',
      message: '',
      messages: [],
      scrollIntoView: ''
    }
  },
  onLoad() {
    // 连接websocket服务器
    this.socket = io('http://localhost:3000')
    // 监听服务端发送的消息
    this.socket.on('message', message => {
      this.messages.push(message)
      this.scrollIntoView = `msg${this.messages.length - 1}`
    })
  },
  methods: {
    sendMessage() {
      if (!this.message) {
        return
      }
      const message = {
        username: this.username,
        content: this.message
      }
      // 发送消息给服务端
      this.socket.emit('message', message)
      this.message = ''
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20rpx;
}

.chat-box {
  flex: 1;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.chat-item {
  margin-bottom: 10rpx;
}

.chat-username {
  font-weight: bold;
}

.chat-form {
  display: flex;
  align-items: center;
}

.chat-form input {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
  padding: 0 20rpx;
  border: none;
  border-radius: 10rpx;
  background-color: #f2f2f2;
}

.chat-form button {
  height: 60rpx;
  font-size: 28rpx;
  color: #fff;
  background-color: #007aff;
  border: none;
  border-radius: 10rpx;
  margin-left: 20rpx;
}

</style>

4. 创建websocket服务器，打开控制台，进入项目目录，输入以下命令创建server.js文件：

touch server.js

在server.js文件中编写websocket服务器代码，如下所示：

const app = require('express')()
const server = require('http').createServer(app)
const io = require('socket.io')(server)

io.on('connection', socket => {
  console.log('client connected')
  
  // 监听客户端发送的消息
  socket.on('message', message => {
    console.log('message:', message)
    // 广播消息给所有客户端
    io.emit('message', message)
  })
})

server.listen(3000, () => {
  console.log('server listening on port 3000')
})

5. 启动websocket服务器，打开控制台，输入以下命令启动websocket服务器：

node server.js

6. 启动uniapp项目，点击HBuilderX中的运行按钮，选择运行到浏览器或手机模拟器，即可进入聊天室界面。

以上就是使用uniapp框架实现websocket聊天室的示例代码。