WebSocket 实现简单聊天功能

最新推荐文章于 2024-05-01 23:03:56 发布
最新推荐文章于 2024-05-01 23:03:56 发布
阅读量576 收藏 3
点赞数 1
文章标签： websocket 网络协议 网络 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44726587/article/details/129670805
版权

利用WebSocket长连接实现即使通讯，可以实现个人单独聊天，内容不需要存服务器，这里只有前端代码，后端负责传递消息和用户列表。

<template>
  <div>
    <div class="content" style="display: flex;">

      <div class="leftChat">
        <div v-for="(item,index) in peopleList" :key="index" @click="userchange(item,index)"
          :class="indexChekck == index ? 'peopelCheck' : 'people'">
          <img :src=" item.avatar ?       baseUrl + item.avatar   : require('@/assets/image/profile.png')" alt=""
            style="width: 50px;height: 50px;"> <span style="width: 60px;font-size: 16px;">{{item.userName}}</span>
          <div class="xaioxi" v-if="item.number >0">{{ item.number >=99 ? '99+' :  item.number+ '+'  }}</div>
        </div>
        <div v-if="peopleList.length ==0">暂无人在线</div>
      </div>

      <div v-if="showPeo" style="position: relative;">
        <div class="top">
          <img :src=" topeople.avatar ?       baseUrl + topeople.avatar   : require('@/assets/image/profile.png')"
            alt="" style="width: 50px;height: 50px;border-radius: 50%;margin-left: 5px;">
          <span style="margin-left: 10px;">{{topeople.userName}}</span>

        </div>
        <!-- 聊天内容 -->
        <div id="message" style="" ref="message">
          <div v-for="(item,idnexs) in   this.allPeople[this.chatIndex].chatList" :key="idnexs"
            style="position: relative;">
            <div class="left" v-if="item.class =='left'">
              <div style="text-align: left;font-size: 14px;">{{item.name }}</div>
              <div style="margin: 10px 0;text-align: left;">
                <!-- <div class="leftText">{{ item.message }}</div>
                <img :src="baseUrl + item.img" alt=""> -->
                <div v-html="item.message" class="leftText"></div>
              </div>

            </div>
            <div class="right" v-if="item.class =='right'">
              <div style="text-align: right;font-size: 14px;">{{item.name }}</div>
              <div style="margin: 10px 0;text-align: right;">
                <!-- <div class="rightText">{{ item.message }}</div> -->
                <div v-html="item.message" class="rightText"></div>
              </div>
            </div>
          </div>
        </div>

        <div id="text" class="editable-container" :contenteditable="true" @keydown="textareaKeydown($event)"></div>
        <!-- <div id="text">

        </div>
        <el-input text="text" id="text" @keydown="textareaKeydown($event)" :v-model="messages"></el-input> -->

        <div @click="sendMessage" class="sendBtn">发送消息</div>
      </div>

    </div>



  </div>
</template>

这是简单界面，实现简单聊天，只能和在线的人聊天，无法和不在线的聊天，

      getIs() {
        let that = this
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
          websocket = new WebSocket("ws://自己的地址" );
          
        } else {
          alert('Not support websocket');
        }
        //接收到消息的回调方法
        websocket.onmessage = function (event) {
          that.showMessage(event.data);
          let data = JSON.stringify(event.data);
          if (data.dataType == 3) {
            alert(data.message);
          }
        }
      },
      showMessage(message) {
        let data = JSON.parse(message);
        let messages = ''
        if (data.dataType == 1) {

          let arr = []
          if (this.allPeople.length != 0) {
            arr = this.peopleList
          }
          this.peopleList = data.userList
          this.peopleList.forEach(item => {
            for (let i = 0; i < arr.length; i++) {
              if (item.userId == arr[i].userId) {
                item.number = arr[i].number ? arr[i].number : 0
              }
            }
          })
          let array = data.userList
          if (this.allPeople.length != 0) {
            this.allPeople.forEach((item) => {
              for (let i = 0; i < array.length; i++) {
                let n = 0
                let m = 0
                if (item.id != array[i].userId) {
                  n++
                } else {
                  m++
                }
                if (n >= array.length) {
                  this.allPeople.push({
                    id: array[i].userId,
                    chatList: [],
                    number: 0,
                    isTrue: true
                  })
                }
                if (m >= 1) {
                  item.isTrue = true
                } else {
                  item.isTrue = false
                }
              }
            })
          } else {
            for (let i = 0; i < array.length; i++) {
              this.allPeople.push({
                id: array[i].userId,
                chatList: [],
                number: 0,
                isTrue: true
              })
            }
          }

          //   console.log('所有列表', this.allPeople);
        } else if (data.dataType == 2) {
          messages = data.message
          this.allPeople.forEach((item, index) => {
            if (item.id == data.fromUserId) {
              this.allPeople[index].chatList.push({
                class: 'left',
                message: data.message,
                name: data.fromUserName,
                // img: '/profile/signature/2021/12/09/64c9f089-b0fb-4a3f-a51b-8240369a09d6.jpeg',
              })
            }
          })
          this.peopleList.forEach(item => {
            if (item.userId == data.fromUserId && data.fromUserId != this.toUserId) {
              item.number++
            }
          })
          this.$forceUpdate()
          //   console.log('人员信息', this.peopleList);
          this.$emit('newchatChange')
          //   console.log('dsadsad', this.allPeople[this.chatIndex]);
          this.$nextTick(() => {
            let ele = document.getElementById("message");
            //判断元素是否出现了滚动条
            if (ele) {
              ele.scrollTop = ele.scrollHeight;
            }
            //设置滚动条到最底部
          })
        } else if (data.dataType == 4) {
          this.$message('对方已掉线，您发送的消息对方已经看不到了')

        }
        // console.log('data', data, this.peopleList);
        // document.getElementById('messages').innerHTML += messages + '<br/>';
      },
      userchange(val, index) {
        this.indexChekck = index
        this.showPeo = true
        this.topeople = val
        this.toUserId = val.userId
        // console.log('点击了', val);
        this.allPeople.forEach((item, index) => {
          if (item.id == this.toUserId) {
            this.chatIndex = index
            this.allPeople[this.chatIndex].number = 0
          }
        })

        this.peopleList.forEach(item => {
          if (item.userId == this.toUserId) {
            item.number = 0
          }
        })
        this.$nextTick(() => {
          let ele = document.getElementById("message");
          //判断元素是否出现了滚动条
          if (ele) {
            ele.scrollTop = ele.scrollHeight;

          }
          //设置滚动条到最底部
        })
        // console.log('dsadsadasdsad', this.allPeople[this.chatIndex]);
      },
      //监听按键操作
      textareaKeydown(event) {
        if (event.ctrlKey && event.keyCode === 13) {
          event.preventDefault() // 阻止浏览器默认换行操作

        } else if (event.keyCode === 13) {
          //enter
          this.sendMessage();
          event.preventDefault() // 阻止浏览器默认换行操作
          return false
        }
      },
      //发送消息
      sendMessage() {
        // if (websocket) {
        //   // websocket.close();
        // } else {
        //   this.getIs()
        // }
        var msgBak = document.getElementById('text').innerHTML;
        if (msgBak != null && msgBak != "") {
          //   console.log('消息列表', this.chatList);
          let data = {
            toUserId: this.toUserId,
            message: msgBak
          }
          var map2json = JSON.stringify(data)
          if (map2json.length < 8000) {
            websocket.send(map2json);
            document.getElementById('text').innerHTML = null;
            this.allPeople[this.chatIndex].chatList.push({
              class: 'right',
              message: msgBak,
              name: localStorage.getItem('nickName')
            })
            //   console.log('发送消息', this.allPeople);

            this.$nextTick(() => {
              let ele = document.getElementById("message");
              //判断元素是否出现了滚动条

              //设置滚动条到最底部
              ele.scrollTop = ele.scrollHeight;
            })

          } else {
            this.$message('文本或者图片太长了，少写一点吧')
            document.getElementById('text').innerHTML = null;

          }
        } else {
          this.$message('请输入内容')
        }
        this.messages = null
      },

js部分实现用户列表查询，发送消息，以及接收消息，有消息会提示，

一下是全部代码

<template>
  <div>
    <!-- <div id="messages"></div> -->
    <div class="content" style="display: flex;">

      <div class="leftChat">
        <div v-for="(item,index) in peopleList" :key="index" @click="userchange(item,index)"
          :class="indexChekck == index ? 'peopelCheck' : 'people'">
          <img :src=" item.avatar ?       baseUrl + item.avatar   : require('@/assets/image/profile.png')" alt=""
            style="width: 50px;height: 50px;"> <span style="width: 60px;font-size: 16px;">{{item.userName}}</span>
          <div class="xaioxi" v-if="item.number >0">{{ item.number >=99 ? '99+' :  item.number+ '+'  }}</div>
        </div>
        <div v-if="peopleList.length ==0">暂无人在线</div>
      </div>

      <div v-if="showPeo" style="position: relative;">
        <div class="top">
          <img :src=" topeople.avatar ?       baseUrl + topeople.avatar   : require('@/assets/image/profile.png')"
            alt="" style="width: 50px;height: 50px;border-radius: 50%;margin-left: 5px;">
          <span style="margin-left: 10px;">{{topeople.userName}}</span>

        </div>
        <!-- 聊天内容 -->
        <div id="message" style="" ref="message">
          <div v-for="(item,idnexs) in   this.allPeople[this.chatIndex].chatList" :key="idnexs"
            style="position: relative;">
            <div class="left" v-if="item.class =='left'">
              <div style="text-align: left;font-size: 14px;">{{item.name }}</div>
              <div style="margin: 10px 0;text-align: left;">
                <!-- <div class="leftText">{{ item.message }}</div>
                <img :src="baseUrl + item.img" alt=""> -->
                <div v-html="item.message" class="leftText"></div>
              </div>

            </div>
            <div class="right" v-if="item.class =='right'">
              <div style="text-align: right;font-size: 14px;">{{item.name }}</div>
              <div style="margin: 10px 0;text-align: right;">
                <!-- <div class="rightText">{{ item.message }}</div> -->
                <div v-html="item.message" class="rightText"></div>
              </div>
            </div>
          </div>
        </div>

        <div id="text" class="editable-container" :contenteditable="true" @keydown="textareaKeydown($event)"></div>
        <!-- <div id="text">

        </div>
        <el-input text="text" id="text" @keydown="textareaKeydown($event)" :v-model="messages"></el-input> -->

        <div @click="sendMessage" class="sendBtn">发送消息</div>
      </div>

    </div>



  </div>
</template>
<!-- <script src="./"></script> -->
<script>
  let websocket = null;

  export default {
    data() {
      return {
        messagesss: null,
        chatIndex: -1,
        allPeople: [], //所有人的消息
        indexChekck: -1,
        chatList: [],
        showPeo: false,
        topeople: {},
        toUserId: null,
        baseUrl: process.env.VUE_APP_BASE_API,
        peopleList: [],
        messages: null,
        id: localStorage.getItem('userId'),
        shakeList: [],
      }
    },
    mounted() {

      let time = null
      time = setInterval(() => {
        if (websocket) {
          websocket.close();
          this.getIs()
        } else {
          this.getIs()
        }
      }, 30000);

      this.getIs()
    },

    methods: {
      getIs() {
        let that = this
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
          websocket = new WebSocket("ws://自己的地址" + this.id);
         
        } else {
          alert('Not support websocket');
        }
        //接收到消息的回调方法
        websocket.onmessage = function (event) {
          that.showMessage(event.data);
          let data = JSON.stringify(event.data);
          if (data.dataType == 3) {
            alert(data.message);
          }
        }
      },
      showMessage(message) {
        let data = JSON.parse(message);
        let messages = ''
        if (data.dataType == 1) {

          let arr = []
          if (this.allPeople.length != 0) {
            arr = this.peopleList
          }
          this.peopleList = data.userList
          this.peopleList.forEach(item => {
            for (let i = 0; i < arr.length; i++) {
              if (item.userId == arr[i].userId) {
                item.number = arr[i].number ? arr[i].number : 0
              }
            }
          })
          let array = data.userList
          if (this.allPeople.length != 0) {
            this.allPeople.forEach((item) => {
              for (let i = 0; i < array.length; i++) {
                let n = 0
                let m = 0
                if (item.id != array[i].userId) {
                  n++
                } else {
                  m++
                }
                if (n >= array.length) {
                  this.allPeople.push({
                    id: array[i].userId,
                    chatList: [],
                    number: 0,
                    isTrue: true
                  })
                }
                if (m >= 1) {
                  item.isTrue = true
                } else {
                  item.isTrue = false
                }
              }
            })
          } else {
            for (let i = 0; i < array.length; i++) {
              this.allPeople.push({
                id: array[i].userId,
                chatList: [],
                number: 0,
                isTrue: true
              })
            }
          }

          //   console.log('所有列表', this.allPeople);
        } else if (data.dataType == 2) {
          messages = data.message
          this.allPeople.forEach((item, index) => {
            if (item.id == data.fromUserId) {
              this.allPeople[index].chatList.push({
                class: 'left',
                message: data.message,
                name: data.fromUserName,
                // img: '/profile/signature/2021/12/09/64c9f089-b0fb-4a3f-a51b-8240369a09d6.jpeg',
              })
            }
          })
          this.peopleList.forEach(item => {
            if (item.userId == data.fromUserId && data.fromUserId != this.toUserId) {
              item.number++
            }
          })
          this.$forceUpdate()
          //   console.log('人员信息', this.peopleList);
          this.$emit('newchatChange')
          //   console.log('dsadsad', this.allPeople[this.chatIndex]);
          this.$nextTick(() => {
            let ele = document.getElementById("message");
            //判断元素是否出现了滚动条
            if (ele) {
              ele.scrollTop = ele.scrollHeight;
            }
            //设置滚动条到最底部
          })
        } else if (data.dataType == 4) {
          this.$message('对方已掉线，您发送的消息对方已经看不到了')

        }
        // console.log('data', data, this.peopleList);
        // document.getElementById('messages').innerHTML += messages + '<br/>';
      },
      userchange(val, index) {
        this.indexChekck = index
        this.showPeo = true
        this.topeople = val
        this.toUserId = val.userId
        // console.log('点击了', val);
        this.allPeople.forEach((item, index) => {
          if (item.id == this.toUserId) {
            this.chatIndex = index
            this.allPeople[this.chatIndex].number = 0
          }
        })

        this.peopleList.forEach(item => {
          if (item.userId == this.toUserId) {
            item.number = 0
          }
        })
        this.$nextTick(() => {
          let ele = document.getElementById("message");
          //判断元素是否出现了滚动条
          if (ele) {
            ele.scrollTop = ele.scrollHeight;

          }
          //设置滚动条到最底部
        })
        // console.log('dsadsadasdsad', this.allPeople[this.chatIndex]);
      },
      //监听按键操作
      textareaKeydown(event) {
        if (event.ctrlKey && event.keyCode === 13) {
          event.preventDefault() // 阻止浏览器默认换行操作

        } else if (event.keyCode === 13) {
          //enter
          this.sendMessage();
          event.preventDefault() // 阻止浏览器默认换行操作
          return false
        }
      },
      //发送消息
      sendMessage() {
        // if (websocket) {
        //   // websocket.close();
        // } else {
        //   this.getIs()
        // }
        var msgBak = document.getElementById('text').innerHTML;
        if (msgBak != null && msgBak != "") {
          //   console.log('消息列表', this.chatList);
          let data = {
            toUserId: this.toUserId,
            message: msgBak
          }
          var map2json = JSON.stringify(data)
          if (map2json.length < 8000) {
            websocket.send(map2json);
            document.getElementById('text').innerHTML = null;
            this.allPeople[this.chatIndex].chatList.push({
              class: 'right',
              message: msgBak,
              name: localStorage.getItem('nickName')
            })
            //   console.log('发送消息', this.allPeople);

            this.$nextTick(() => {
              let ele = document.getElementById("message");
              //判断元素是否出现了滚动条

              //设置滚动条到最底部
              ele.scrollTop = ele.scrollHeight;
            })

          } else {
            this.$message('文本或者图片太长了，少写一点吧')
            document.getElementById('text').innerHTML = null;

          }
        } else {
          this.$message('请输入内容')
        }
        this.messages = null
      },
    }
  }

</script>

<style lang="scss">
  .editable-container {
    img {
      max-width: 190px !important;
      max-height: auto !important;
    }
  }

  .leftText img {
    max-width: 190px !important;
    max-height: auto !important;
  }

  .rightText img {
    max-width: 190px !important;
    max-height: auto !important;
  }

</style>
<style lang="scss" scoped>
  .top {
    display: flex;
    align-items: center;
    border-bottom: rgb(167, 162, 162) 1px solid;
    height: 60px;
    line-height: 60px;
    width: 500px;
    background: #f5f5f5;
  }

  .content {
    position: fixed;
    // position: absolute;
    top: 100px;
    right: 60px;
    z-index: 999;
  }

  #message {
    padding: 10px;
    overflow: hidden;
    overflow: scroll;
    width: 500px;
    background: #f5f5f5;
    height: 400px;

  }

  .sendBtn {
    font-size: 14px;
    color: #07c160;
    border-radius: 5px;
    position: absolute;
    right: 20px;
    bottom: 10px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px 0 10px;
    text-align: center;
    background: white;
  }

  .sendBtn:hover {
    background: #cecbcb;

  }



  #text {
    padding: 10px;
    border-top: 1px rgb(167, 162, 162) solid;
    background: #f5f5f5;
    width: 500px;
    height: 140px;
    overflow: hidden;
    overflow: scroll;

    img {
      width: 70px !important;
      height: 70px !important;
    }
  }

  #text::-webkit-scrollbar {
    display: none
  }

  .leftChat {
    min-width: 100px;
    padding: 10px;
    background: #e6e6e6;
    border-right: 1px rgb(167, 162, 162) solid;
    overflow: hidden;
    overflow: scroll;
    height: 600px;

    .xaioxi {
      position: absolute;
      top: 0px;
      right: 10px;
      width: 25px;
      height: 15px;
      border-radius: 10px;
      background: red;
      color: white;
      font-size: 12px;
      line-height: 15px;
      text-align: center;
    }

    // /deep/ .el-badge__content,
    // .el-badge__content--undefined,
    // .is-fixed {
    //   top: 5px;
    //   right: 35px;
    // }

    .people {
      position: relative;
      border-bottom: 1px solid rgb(167, 162, 162);
      margin-top: 10px;
      padding-bottom: 5px;
      display: flex;
      align-items: center;

      span {
        margin-left: 10px;
      }
    }

    .peopelCheck {
      position: relative;
      border-bottom: 1px solid rgb(167, 162, 162);
      margin-top: 10px;
      padding-bottom: 5px;
      display: flex;
      align-items: center;
      background: #cac8c6;

      span {
        margin-left: 10px;
      }
    }
  }

  // 去除滚动条显示
  #message::-webkit-scrollbar {
    display: none
  }

  // 去除滚动条显示
  .leftChat::-webkit-scrollbar {
    display: none
  }

  .left {
    // width: 100%;
    // float: left;
    margin-top: 20px;
    margin-right: 0px;

  }

  .right {
    // width: 100%;
    margin-top: 20px;
    // float: right;
    margin-right: 0px;
  }

  .rightText {
    margin-right: 0;
    line-height: 1.5;
    padding: 10px 20px;
    border-radius: 15px;
    color: #f7f8f8;
    background-color: #00a5ff;
    width: auto;
    max-width: 80%;
    display: inline-block;
    text-align: start;
    // width: 100%;
    line-height: 25px;

    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
    // min-width: 200px;
    // min-height: 200px;

    img {
      width: 150px !important;
      height: 150px !important;
    }

  }



  .leftText {

    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
    margin-left: 0px;
    line-height: 1.5;
    padding: 10px 20px;
    border-radius: 15px;
    color: black;
    background-color: #ffffff;
    width: auto;
    max-width: 80%;
    display: inline-block;
  }

</style>
好 想 。
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Java中使用websocket实现在线聊天功能
08-27
Java中使用websocket实现在线聊天功能 Java中使用websocket实现在线聊天功能是当下最流行的技术之一。websocket是一种双向实时通信协议，允许服务器推送内容到客户端，而不需要客户端发出请求。以下是Java中使用...
WebSocket实现简单客服聊天系统
08-30
WebSocket实现简单客服聊天系统 WebSocket是HTML5中的一个新的协议，它使得客户端和服务端之间可以进行实时的双向通信。本文将详细介绍如何使用WebSocket实现一个简单的客服聊天系统，满足电商系统中的客服聊天需求...
使用WebSocket实现聊天功能
weixin_49832841的博客
08-27 1746
使用websocket实现一对一的聊天功能和未读消息的功能
vue+websokect实现实时聊天，可单聊、可群聊
weixin_42966151的博客
01-12 1万+
一个实时聊天的功能，其核心就是websokect，进行双向平等对话，从后端主动推送消息到前端，实现实时推送消息的功能。
黑马 - websocket搭建在线聊天室
最新发布
白羊座的橙子
05-01 2078
websocket对象创建websocket对象相关事件websocket 对象提供的方法## 2、服务端apiTomcat 的7.0.5版本开始支持 websocket , 并且实现了Java websocket 规范。Java websocket 应用由一系列的 Endpoint组成。Endpoint 是一个java对象，代表websocket连接的一段。对于服务端，我们可以视其为处理具体websocket消息的接口。
WebSocket开发（一对一聊天）功能
AnNanDu的博客
08-22 2625
从0开始基于WebSocket建立easy-chatroom，本篇为websocket实现一对一私聊和统计在线人数等功能。下面代码都是基于上篇文章中的代码进行的修改，开始的步骤中为了一步步的循环渐进所以只展示修改部分的代码，如果有感觉不连贯的同学可以完成上篇文章后再按本篇步骤执行，完整代码会在最后贴出。
WebSocket在gin中的使用—实现群聊和私聊
m0_63512120的博客
03-24 1178
WebSocket是一种在客户端和服务器之间建立持久性连接的通信协议，它允许客户端和服务器之间进行全双工通信。
WebSocket - 底层原理、协议、编程式基础架构搭建
CYK_byte的博客
03-06 4966
基于 WebSocket、Spring Boot 下，用一个简易的小 demo 讲解一下“QQ聊天”功能原理~
Springboot基于websocket实现简单在线聊天功能
08-19
SpringBoot 基于 WebSocket 实现简单在线聊天功能 SpringBoot 框架提供了强大的 WebSocket 支持，允许开发者轻松地构建实时通讯应用程序。在本文中，我们将通过示例代码详细介绍如何使用 SpringBoot 实现简单的在线...
java websocket实现简单的聊天功能
12-05
下面将详细介绍如何使用Java WebSocket实现一个简单的聊天功能。 首先，我们需要创建WebSocket服务器端。在Java中，我们通常会创建一个实现了`javax.websocket Endpoint`接口的类。这个类是WebSocket连接的核心，它...
nodejs+websocket实现简单的多人聊天
05-06
这个示例只是一个基础的WebSocket聊天应用，实际项目中可能需要考虑更多的功能，例如用户认证、错误处理、消息格式化等。同时，为了部署到生产环境，还需要考虑负载均衡、安全性以及性能优化等问题。但无论如何，这...
基于websocket的聊天室源码
03-04
基于java Websocket开发的网页聊天工具，曾用于本人课程设计，在此放出造福大家
Spring Boot整合websocket实现群聊，点对点聊天,图片发送，音频发送
10-18
Spring Boot整合websocket实现群聊，点对点聊天,图片发送，音频发送
利用websocket实现一个聊天demo（超简单node版）
前端成长之路
12-03 1147
闲来无事做，刚好最近了解了websocket，那就利用websocket实现一个简单的聊天功能； 两个页面a,b。在a页面输入内容发送后，在b页面打印出来，反之亦然；
WebSocket 实现聊天功能
tuoniaoxs的博客
05-07 3872
java SSM项目中用WebSocket 实现聊天功能 前言 当我们开发的javaweb项目中需要实现聊天功能时，可以用HTML5的WebSocket协议来实现。在实现功能之前，先来看一下WebSocket的基本知识，加深对它的认识后面才能更好的理解。 （一） WebSocket WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中
WebSocket实现聊天室功能(springboot+vue3+vite)
qq_49721447的博客
09-03 2832
WebSocket实现聊天室功能(springboot+vue3+vite)
vue移动端实现聊天功能
w15635748705的博客
10-22 4419
这个没有什么技术含量props: {add: {},back: {},title: {default: "登陆",},search: {},},// 跳转到搜索页面},// 跳转到搜索页面},// 返回事件函数},},
Web端即时聊天项目实现（基于WebSocket）
热门推荐
桐小目的秘密基地
02-28 10万+
Web端即时聊天项目实现 项目背景  其实这个项目算是我做过的花时间最长也投入心血最多的一个项目了，当时决定开始做这个的时候我几乎什么都不会，那时我个人的情况是： - JavaEE方面： 会jsp+servlet，也简单使用过Struts，Spring仅仅只是听说过。 - 前端方面： html，css有一些基础，会使用Bootstrap前端工具开发集，js基本不了解。 - 数据库...
使用WebSocket设计简单聊天软件的雏形
宝华的小岛
06-05 1510
动机是要了解WebSocket，网购没有书籍，网上的资料也比较碎片化，接触这个有好几天了，没找到一个深入的有效途径。有朋友给我一个例程，但是由于搞不定Idea，所以也没有跑起来。网上很多例子，讲解都不完整，不是注释不齐，就是没交代环境配置。今天花了半天时间，把一个简单的IM系统的雏形弄出来。立即写一个博客，一方面有利于自己记忆，一方面也许能为其他和我一样的初学者指一条路。 这个系统分三部分，服务
利用spring boot和websocket实现聊天功能
03-25
A：要实现基于Spring Boot和WebSocket的聊天功能，可以按以下步骤进行。 1. 集成WebSocket依赖。在Spring Boot项目的pom.xml文件中添加以下依赖： ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> ``` 2. 创建WebSocket配置类。在Spring Boot项目中，创建一个WebSocket配置类，用于配置WebSocket相关的参数和处理器等。具体代码如下： ```java @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(new ChatWebSocketHandler(), "/chat").setAllowedOrigins("*"); } } ``` 上面的代码创建了一个名为“/chat”的WebSocket处理器，同时允许所有来源的连接。 3. 创建WebSocket处理器。在Spring Boot项目中，创建一个WebSocket处理器，用于处理WebSocket连接和消息等。具体代码如下： ```java public class ChatWebSocketHandler extends TextWebSocketHandler { private List<WebSocketSession> sessions = new ArrayList<>(); @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { sessions.add(session); } @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { for (WebSocketSession s : sessions) { s.sendMessage(message); } } } ``` 上面的代码创建了一个名为ChatWebSocketHandler的WebSocket处理器，它可以接收和发送文本消息。handleTextMessage方法对于接收到的消息进行处理，然后将它发送给所有连接的客户端。 4. 创建聊天页面。在Web应用程序中，创建一个聊天页面，允许用户在页面上输入和发送消息。具体代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>聊天室</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <input id="username" type="text" placeholder="请输入用户名"><br> <textarea id="message" placeholder="请输入消息"></textarea><br> <button id="sendBtn">发送</button> <script> var ws; $("#sendBtn").click(function () { if (!ws) { alert("WebSocket未连接"); return; } var username = $("#username").val(); var message = $("#message").val(); if (!username) { alert("请输入用户名"); return; } if (!message) { alert("请输入消息"); return; } var data = { username: username, message: message }; ws.send(JSON.stringify(data)); $("#message").val(""); }); $(function () { ws = new WebSocket("ws://" + location.host + "/chat"); ws.onopen = function () { console.log("WebSocket已连接"); }; ws.onclose = function () { console.log("WebSocket已关闭"); ws = null; }; ws.onmessage = function (event) { console.log(event.data); }; }); </script> </body> </html> ``` 上面的HTML代码创建了一个简单的聊天页面，包含一个用户名输入框、一个消息输入框和一个发送按钮。通过WebSocket连接服务器并发送消息。 5. 测试聊天功能。启动Spring Boot应用程序，然后使用多个浏览器窗口或标签页打开聊天页面，在页面上输入和发送消息，验证聊天功能是否正常工作。 至此，完成了Spring Boot和WebSocket实现聊天功能的整个过程。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值