WebSocket聊天室demo

SpringBoot+Maven+前后端分离+WebSocket+nginxMaven依赖<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId></dependency>后端代码WebSocketServer文件
摘要由CSDN通过智能技术生成

SpringBoot+Maven+前后端分离+WebSocket+nginx

Maven依赖

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

后端代码

WebSocketServer文件:

import com.xad.util.TimeUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.HashSet;
import java.util.Map;
import java.util.Set;
import java.util.concurrent.ConcurrentHashMap;

@Slf4j
@Component
@ServerEndpoint("/websocket/chat/{roomName}")
public class WebSocketServer {
   

    // 使用map来收集session,key为roomName,value为同一个房间的用户集合
    // concurrentMap的key不存在时报错,不是返回null
    private static final Map<String, Set<Session>> rooms = new ConcurrentHashMap<>();

    //注入聊天的service方法

    @OnOpen
    public void connect
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于Vue3和WebSocket聊天室,可以根据以下步骤进行实现: 1. 首先,创建一个Vue3的项目并安装Vue3和WebSocket的依赖。可以使用Vue CLI来创建项目,并使用npm或yarn来安装依赖。 2. 在Vue3的项目中,可以使用Vue的Composition API来处理WebSocket的逻辑。通过引入WebSocket库,可以在Vue组件中创建WebSocket实例,并使用其提供的方法进行连接、发送消息和接收消息。 3. 在Vue组件中,可以创建一个WebSocket连接,并在组件的生命周期钩子中进行连接的初始化。可以使用`onopen`事件监听连接是否成功,`onmessage`事件监听接收到的消息,以及`onclose`事件监听连接关闭的情况。 4. 在Vue组件中,可以定义发送消息的方法,将要发送的消息作为参数传入WebSocket的`send`方法。 5. 在Vue模板中,可以使用`v-for`指令来循环渲染消息列表,可以使用`v-model`指令来双向绑定输入框的内容,并在发送按钮上绑定发送消息的方法。 6. 可以在Vue组件中使用计算属性来对接收到的消息进行处理,例如格式化时间、过滤敏感词等。 7. 最后,可以在Vue组件中使用样式和布局来美化聊天室的界面,例如设置消息框的样式、聊天框的大小等。 通过以上步骤,你可以实现一个基于Vue3和WebSocket聊天室。这样的聊天室可以实现实时通信,并且不需要轮询服务器,节省了资源并提高了效率。如果你需要更具体的代码示例和详细的配置说明,可以参考提供的使用Java和Vue2.0开发的WebSocket聊天室Demo

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值