Vue使用WebSocket实现在线聊天

1.判断浏览器是否支持WebSocket,发起WebSocket连接

if(typeof(WebSocket) === 'undefined'){
    alert("您的浏览器不支持在线聊天")
}else{
    //初始化WebSocket
    _this.socket = new WebSocket("wss://"+你的地址)
    _this.socket.onopen = function(){
			console.log("连接成功")
			heartCheck.reset().start()
	}
}

2.增加心跳检测,并在WebSocket连接成功是调用该方法

                        let _this = this
						var heartCheck = {
							timeout:5000,
							timeoutObj:null,
							reset:function(){
								clearInterval(this.timeoutObj)
								return this;
							},
							start:function(){
								this.timeoutObj = setInterval(function(){
									_this.socket.send('heartbeat')
									console.log("给服务器发送:heartbeat")
								},this.timeout)
							}
						}

3.接收到服务器的消息

_this.socket.onmessage = function(event){
    console.log("接收到服务器消息:"+event.data)
}

4.关闭时聊天时销毁WebSocket链接

this.socket.close()

完整代码

    init(){
    if(typeof(WebSocket) === 'undefined'){
						alert("您的浏览器不支持在线聊天")
					}else{
						let _this = this
						var heartCheck = {
							timeout:5000,
							timeoutObj:null,
							reset:function(){
								clearInterval(this.timeoutObj)
								return this;
							},
							start:function(){
								this.timeoutObj = setInterval(function(){
									_this.socket.send('heartbeat')
									console.log("给服务器发送:heartbeat")
								},this.timeout)
							}
						}
						_this.socket = new WebSocket("wss://" + )
						_this.socket.onopen = function(){
							console.log("连接成功")
							heartCheck.reset().start()
						}
						_this.socket.onmessage = function(event){
							console.log("接收到服务器消息:"+event.data)
					
						}
					}
}

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
这里是一个示例的Spring Boot + Vue.js + WebSocket在线聊天应用程序的实现。首先,我们可以创建一个Spring Boot工程,然后添加WebSocket的依赖。 在pom.xml文件中添加以下依赖: ```xml <dependencies> <!-- ... --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> </dependencies> ``` 接下来,我们可以编写一个WebSocket配置类,用于注册WebSocket端点和处理器: ```java @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(new ChatWebSocketHandler(), "/chat"); } } ``` 这里我们注册了一个名为“chat”的WebSocket端点,并将其与一个处理器绑定。 接下来,我们可以编写一个WebSocket处理器类来处理来自客户端的消息: ```java public class ChatWebSocketHandler extends TextWebSocketHandler { private static final List<WebSocketSession> sessions = new CopyOnWriteArrayList<>(); @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) { if (s.isOpen()) { s.sendMessage(message); } } } @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception { sessions.remove(session); } } ``` 这个处理器类中,我们定义了一个静态的WebSocketSession列表,用于存储所有连接到服务器的WebSocket会话。在`afterConnectionEstablished`方法中,我们将新的会话添加到列表中。在`handleTextMessage`方法中,我们遍历所有会话并将接收到的消息发送给它们。在`afterConnectionClosed`方法中,我们将关闭的会话从列表中删除。 最后,我们可以编写一个简单的HTML页面,在页面中使用Vue.js和WebSocket API来实现在线聊天功能: ```html <!DOCTYPE html> <html> <head> <title>Chat Room</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-for="message in messages">{{ message }}</div> <input v-model="inputMessage" @keyup.enter="send"> </div> <script> var ws = new WebSocket("ws://" + window.location.host + "/chat"); var app = new Vue({ el: '#app', data: { messages: [], inputMessage: '' }, methods: { send: function () { ws.send(this.inputMessage); this.inputMessage = ''; } } }); ws.onmessage = function (event) { app.messages.push(event.data); }; </script> </body> </html> ``` 在这个HTML页面中,我们使用Vue.js来实现数据绑定和事件处理。我们还使用WebSocket API来连接到WebSocket服务器,并在收到消息时更新Vue.js的数据模型。在输入框中按下回车键时,我们将输入框中的内容发送到WebSocket服务器。 以上就是一个简单的Spring Boot + Vue.js + WebSocket在线聊天应用程序的实现

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值