webSocket的使用

socket分为客户端和服务端,客户端监听服务端传的消息

客户端

——具体一点就是在写在js中

<!--这里是html5原生的webSocket-->
<script>
    var websocket = null;
    if ('WebSocket' in window){
        websocket = new WebSocket('ws://***/**/webSocket');
    }else {
        alert('该浏览器不支持webSocket!');
    }

    websocket.onopen = function () {
        console.log('建立连接');
    };

    websocket.onclose = function () {
        console.log('连接关闭');
    };

    websocket.onmessage = function (event) {
        console.log('收到消息:' + event.data);
        //弹窗提醒,播放音乐等操作
    };

    websocket.onerror = function () {
        alert('webSocket通讯发生错误!');
    };

    websocket.onbeforeunload = function () {
        websocket.close();
    };
</script>

服务端

1.引入依赖

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

2.配置

package com.**.config;

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

@Component
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

3.编写类(像个Controller,但是又把它当作Service在用,所以放在service包中)

package com.**.service;

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.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArrayList;
import java.util.concurrent.CopyOnWriteArraySet;


@Component
@ServerEndpoint("/webSocket")
@Slf4j
public class WebSocket {

    private Session session;

    private static CopyOnWriteArraySet<WebSocket> webSocketCopyOnWriteArraySet = new CopyOnWriteArraySet<>();

    @OnOpen
    public void onOpen(Session session){
        this.session = session;
        webSocketCopyOnWriteArraySet.add(this);
        log.info("【webSocket消息】 有新的连接,总数:{}", webSocketCopyOnWriteArraySet.size());
    }

    @OnClose
    public void onClose(){
        webSocketCopyOnWriteArraySet.remove(this);
        log.info("【webSocket消息】 连接断开,总数:{}", webSocketCopyOnWriteArraySet.size());
    }

    @OnMessage
    public void onMessage(String message){
        log.info("【webSocket消息】 收到客户端发来的消息{}", message);
    }

    public void sendMessage(String message){
        for (WebSocket webSocket: webSocketCopyOnWriteArraySet){
            log.info("【webSocket消息】 广播消息,message={}", message);
            try {
                webSocket.session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

 

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议,它可以让客户端和服务器之间进行实时通信。在使用 WebSocket 时,客户端和服务器之间会建立一个长连接,这样客户端就可以向服务器发送数据,并从服务器接收数据。相比于传统的 HTTP 请求,WebSocket 的优势是可以实现实时通信,而且不需要频繁地发起请求和响应。 下面是使用 WebSocket 的基本步骤: 1. 客户端向服务器发起 WebSocket 连接请求。 2. 服务器接收到 WebSocket 连接请求,并建立连接。 3. 客户端和服务器之间进行实时通信。 4. 当通信结束时,客户端和服务器都可以关闭连接。 在 JavaScript 中,可以使用 WebSocket 对象来实现 WebSocket 通信。以下是一个简单的 WebSocket 示例: ```javascript // 创建 WebSocket 对象 var ws = new WebSocket('ws://localhost:8080'); // 监听连接事件 ws.onopen = function() { console.log('WebSocket 已连接'); }; // 监听消息事件 ws.onmessage = function(evt) { console.log('收到消息:' + evt.data); }; // 发送消息 ws.send('Hello, WebSocket!'); // 关闭连接 ws.close(); ``` 在上面的示例中,我们首先创建了一个 WebSocket 对象,然后监听了连接事件和消息事件。当连接建立成功时,会触发 onopen 事件;当收到消息时,会触发 onmessage 事件。我们还可以使用 send 方法向服务器发送消息,使用 close 方法关闭连接。 在服务器端,也可以使用 WebSocket 对象来实现 WebSocket 通信。具体实现方式可以参考各种编程语言的 WebSocket 库和示例代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值