websocket的聊天室案例

百度搜索爱敲代码的小庆

于 2023-07-19 15:13:51 发布

阅读量99

点赞数

文章标签： websocket 网络协议网络

本文链接：https://blog.csdn.net/qq_37437493/article/details/131809485

版权

本文展示了如何使用SpringBoot和Vue搭建WebSocket聊天室，包括后端的Maven依赖、WebSocket配置、实体类和工具类的创建，以及如何通过配置注入来获取HttpSession。前端部分详细描述了Vue模板的结构，包括用户输入、消息发送和接收、用户列表等功能。此外，还提到了将聊天记录保存到Redis中的后端实现。

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

websocket的聊天室案例(springBoot+vue)

后端

maven的坐标

<!--websocket依赖-->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

配置文件

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**

@author chen
@description WebSocketConfig配置类，注入对象ServerEndpointExporter，

     这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint
/
@Configuration
public class WebSocketConfig {
  @Bean
  public ServerEndpointExporter serverEndpointExporter() {
    return new ServerEndpointExporter();
}
}

实体类封装

import lombok.AllArgsConstructor;

import lombok.Data;

import lombok.NoArgsConstructor;



@Data

@NoArgsConstructor

@AllArgsConstructor

//用户间传送的消息

public class ResultMessage {

  private boolean isSystem;

  private String fromName;

  //private String toName;

  private Object message;

}

=====================================================



import lombok.AllArgsConstructor;

import lombok.Data;

import lombok.NoArgsConstructor;

@Data

@NoArgsConstructor

@AllArgsConstructor

//呃…

public class Message {

  private String toName;

  private String message;

  private String fromName;

}

工具类

import com.fasterxml.jackson.core.JsonProcessingException;

import com.fasterxml.jackson.databind.ObjectMapper;

import com.websocker.pojo.ResultMessage;



//封装发送的消息内容

public class MessageUtils {

  public static String getMessage(boolean isSystemMessage,String fromName,Object message){

    try{

      ResultMessage resultMessage = new ResultMessage();

      resultMessage.setSystem(isSystemMessage);

      resultMessage.setMessage(message);

      if(fromName != null){

        resultMessage.setFromName(fromName);

     }

//     if(toName !=null ){

//       resultMessage.setToName(toName);

//     }

      ObjectMapper mapper = new ObjectMapper();

      return mapper.writeValueAsString(resultMessage);

   }catch (JsonProcessingException e){

      e.printStackTrace();

   }

    return null;

 }

}

配置注入httpsession

import javax.servlet.http.HttpSession;

import javax.websocket.HandshakeResponse;

import javax.websocket.server.HandshakeRequest;

import javax.websocket.server.ServerEndpointConfig;



public class GetHttpSesstionConfig extends ServerEndpointConfig.Configurator {

  @Override

  public void modifyHandshake(ServerEndpointConfig sec, HandshakeRequest request, HandshakeResponse response) {

   HttpSession httpSession= (HttpSession) request.getHttpSession();

   //将httpsession对象存储到配置 ServerEndpointConfig对象中

    if(httpSession!=null){

      sec.getUserProperties().put(HttpSession.class.getName(),httpSession);

   }

 }

}

webscoket层的编写

import com.fasterxml.jackson.databind.ObjectMapper;

import com.websocker.pojo.Message;

import com.websocker.utile.MessageUtils;

import org.springframework.stereotype.Component;



import javax.websocket.;

import javax.websocket.server.ServerEndpoint;

import java.io.IOException;

import java.util.Map;

import java.util.Set;

import java.util.concurrent.ConcurrentHashMap;



//设置我们当前是webscoket的类

@Component

@ServerEndpoint(value = “/chat”, configurator = GetHttpSesstionConfig.class)

public class ChatWebSocket {



  // 用来 存储每一个客户端对应的当前类对象

  private static Map<String, ChatWebSocket> onlineUsers = new ConcurrentHashMap<>();



  //声明session 对象 通过该对象可以发给指定的用户

  private Session session;





  @OnOpen

  //连接立时被调用

  public void Onpen(Session session, EndpointConfig config) {

    //给全局变量赋值

    this.session = session;

    //  this.httpSession= (HttpSession) config.getUserProperties().get(HttpSession.class.getName());

    //从httpsession获取用户名

    String username = session.getRequestParameterMap().get(“username”).get(0);

    //将当前的这个对象存储到容器当中

    onlineUsers.put(username, this);



    //将当前在线用户的用户名推送到所有的客户端

    String message = MessageUtils.getMessage(true, null, getNames());

    //调用方法进行系统消息的推送

    broadcastAllUsers(message);

 }



  private void broadcastAllUsers(String message) {

    //要将改消息给全部的客户端

    Set<String> strings = onlineUsers.keySet();

    for (String name : strings) {

      // 获取当前集合里面的全部客户端

      ChatWebSocket chatWebSocket = onlineUsers.get(name);

      try {

        //把消息推送给每一个客客户端

        chatWebSocket.session.getBasicRemote().sendText(message);

     } catch (IOException e) {

        e.printStackTrace();

     }

   }

 }



  //获取全部的客户端名

  private Set<String> getNames() {

    return onlineUsers.keySet();

 }



  @OnMessage

  /*

  * 接收到的数据

  */

  public void onMessage(String message, Session session) throws IOException {

    //将数据转成message对象

    ObjectMapper mapper = new ObjectMapper();

    Message mess = mapper.readValue(message, Message.class);

    //获取要将发送给的用户

    String toName = mess.getToName();

    //获取推送给指定用户的信息格式的数据

    String data = mess.getMessage();

    //获取当前登录的用户

    String username = session.getRequestParameterMap().get(“username”).get(0);



    String resultMessage = MessageUtils.getMessage(false, username, data);

    //发送消息

    onlineUsers.get(toName).session.getBasicRemote().sendText(resultMessage);

 }



  @OnClose

  //关闭连接

  public void onClose(Session session) {

    //从容器删除指定的用户

    //获取当前登录的用户

    String username = session.getRequestParameterMap().get(“username”).get(0);

    onlineUsers.remove(username);

    //获取推送的信息

    String message = MessageUtils.getMessage(true, null, getNames());

    broadcastAllUsers(message);

 }

}

前端



<template>

 <div>

  <el-row :gutter=“20”>

   <el-col :span=“12” :offset=“6”>

    <div class=“main”>

     <el-row>

      <el-input

       placeholder=“请输入自己的昵称”

       prefix-icon=“el-icon-user-solid”

       v-model=“name”

       style=“width: 50%”

      ></el-input>

      <el-button type=“primary” @click=“conectWebSocket()”

       >建立连接</el-button

      >

      <el-button type=“danger” @click=“colos”>断开连接</el-button>

     </el-row>

     <el-row>

      <el-input

       placeholder=“请输入要发送的消息”

       prefix-icon=“el-icon-s-promotion”

       v-model=“messageValue”

       style=“width: 50%”

      ></el-input>

      <el-button type=“primary” @click=“sendMessage()”>发送</el-button>

     </el-row>

     <div class=“message”>

      <center v-if=“names.length > 0”>和{{ toName }}的聊天</center>

      <div v-for=“(value, index) in messageList” :key=“index”>

       <el-tag

        v-if=“value.fromName == name”

        type=“success”

        style=“float: right”

        >我：{{ value.message }}</el-tag

       >

       <br />

       <el-tag v-if=“value.fromName != name” style=“float: left”

        >{{ value.fromName }}：{{ value.message }}</el-tag

       >

       <br />

      </div>

     </div>

     <br />

     <div>

      <el-card class=“box-card”>

       <center v-if=“names.length > 0”>

        <el-tag type=“success” key=“选择好友” effect=“dark”

         >选择好友</el-tag

        >

       </center>

       <div v-for=“o in names” :key=“o” class=“text item”>

        <el-tag @click=“updateToname” type=“” effect=“dark”>{{

        o

       }}</el-tag>

       </div>

      </el-card>

     </div>

    </div>

   </el-col>

  </el-row>

 </div>

</template>

优化后和的前端代码



<template>

 <div>

  <el-row :gutter=“20”>

   <el-col :span=“12” :offset=“6”>

    <div class=“main”>

     <!--   <el-row>

      <el-input

       placeholder=“请输入自己的昵称”

       prefix-icon=“el-icon-user-solid”

       v-model=“name”

       style=“width: 50%”

      ></el-input>

      <el-button type=“primary” @click=“conectWebSocket()”

       >建立连接</el-button

      >

     </el-row> -->

     <el-row>

      <center>

       <el-tag type=“danger” key=“选择好友” effect=“dark”>

        当前用户:{{ user.name }}</el-tag

       >

      </center>

     </el-row>

        <br/>

     <el-row>

      <el-input

       placeholder=“请输入要发送的消息”

       prefix-icon=“el-icon-s-promotion”

       v-model=“messageValue”

       style=“width: 50%”

      ></el-input>

      <el-button type=“primary” @click=“sendMessage()”>发送</el-button>

     </el-row>

     <div class=“message” v-if=“toName”>

      <center>

       <el-tag type=“success” key=“选择好友” effect=“dark”

        >和{{ toName }}的聊天</el-tag

       >

      </center>

      <div v-for=“(value, index) in messageList” :key=“index”>

       <el-tag

        v-if=“value.fromName == name”

        type=“success”

        style=“float: right”

        >我：{{ value.message }}</el-tag

       >

       <br />

       <el-tag v-if=“value.fromName != name” style=“float: left”

        >{{ value.fromName }}：{{ value.message }}</el-tag

       >

       <br />

      </div>

     </div>

     <br />

     <div>

      <el-card class=“box-card”>

       <center v-if=“names.length > 0”>

        <el-tag type=“success” key=“选择好友” effect=“dark”

         >选择好友</el-tag

        >

       </center>

       <div v-for=“o in names” :key=“o” class=“text item”>

        <el-tag @click=“updateToname” type=“” effect=“dark”>{{

         o

       }}</el-tag>

       </div>

      </el-card>

     </div>

    </div>

   </el-col>

  </el-row>

 </div>

</template>

后端把聊天记录保存到redis中

import com.shop.shop.entity.Message;

import com.shop.shop.utile.Q;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.data.redis.core.RedisTemplate;

import org.springframework.web.bind.annotation.;

import java.io.IOException;

import java.util.List;



@RestController

@RequestMapping(“/shop/websocket”)

/**

    对我们的聊天记录进行保存到我们的redis当中去

/

public class WebSocketRedisConreoller {



  @Autowired

  private RedisTemplate<String, Object> redisTemplate;





  @GetMapping(“/findName/{name}/{toName}”)

  /

   根据name查询聊天记录

  */

  public Q findName(@PathVariable(“toName”) String toName,

           @PathVariable(“name”) String name

 ) throws IOException {

    List<Message> list = (List<Message>) redisTemplate.opsForValue().get(name + “" + toName);

    List<Message> list1 = (List<Message>) redisTemplate.opsForValue().get(toName + "” + name);

    if (list == null && list1 != null) {

      list = list1;

   }



    return Q.ok().data(“data”, list);

 }





  @PostMapping(“/save”)

  //直接保存

  public Q saveList(@RequestBody List<Message> list) {

    if (list.size() <= 0) {

      return Q.error();

   }

    redisTemplate.opsForValue().set(list.get(0).getFromName() + “" + list.get(0).getToName(), list);

    redisTemplate.opsForValue().set(list.get(0).getToName() + "” + list.get(0).getFromName(), list);

    return Q.ok();

 }

}