WebSocket的基本使用 、与http的区别

指挥官乄
223 阅读3分钟

WebSocket的使用

1.安装依赖

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

2.后端配置

1.创建WebSocketServer类

package com.zking.socket;

@Service
@Slf4j
// ws:127.0.0.1:8080/
@ServerEndpoint("/socket/{userid}")
public class WebSocketServer {

    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;
    /**
     * CopyOnWriteArraySet它是线程安全的无序的集合，可以将它理解成线程安全的HashSet
     * HashSet是通过“散列表(HashMap)”实现的，而CopyOnWriteArraySet则是通过“动态数组(CopyOnWriteArrayList)”实现的
     */
    //虽然@Component默认是单例模式的，但springboot还是会为每个websocket连接初始化一个bean，所以可以用一个静态set保存起来。
    private static CopyOnWriteArraySet<WebSocketServer> webSockets =new CopyOnWriteArraySet<>();
    // 用来存在线连接数
    private static Map<String,Session> sessionPool = new HashMap<>();

    /**
     * 链接成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam(value="userid")String userid) {
        try {
            this.session = session;
            webSockets.add(this);
            sessionPool.put(userid, session);
            log.info("【websocket消息】有新的连接，总数为:"+webSockets.size());
        } catch (Exception e) {
        }
    }

    /**
     * 链接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        try {
            webSockets.remove(this);
            log.info("【websocket消息】连接断开，总数为:"+webSockets.size());
        } catch (Exception e) {
        }
    }
    /**
     * 收到客户端消息后调用的方法
     * @param message
     */
    @OnMessage
    public void onMessage(String message) {
        log.info("【websocket消息】收到客户端消息:"+message);
    }

    /** 发送错误时的处理
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("用户错误,原因:"+error.getMessage());
        error.printStackTrace();
    }


    // 此为广播消息
    public void sendAllMessage(String message) {
        log.info("【websocket消息】广播消息:"+message);
        for(WebSocketServer webSocket : webSockets) {
            try {
                if(webSocket.session.isOpen()) {
                    webSocket.session.getAsyncRemote().sendText(message);
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    // 此为单点消息
    public void sendOneMessage(String userid, String message) {
        Session session = sessionPool.get(userid);
        if (session != null && session.isOpen()) {
            try {
                log.info("【websocket消息】 单点消息:"+message);
                session.getAsyncRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    // 此为单点消息(多人)
    public void sendMoreMessage(String[] userids, String message) {
        for(String userid:userids) {
            Session session = sessionPool.get(userid);
            if (session != null&&session.isOpen()) {
                try {
                    log.info("【websocket消息】 单点消息:"+message);
                    session.getAsyncRemote().sendText(message);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }

    }
}

2.创建WebSocketConfig配置类

package com.zking.config;
@Configuration
public class WebsocketConfig {
    /**
     * 这个bean 会自动注册使用了@ServerEndpoint 注解的WebSocket
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

3.创建一个Controller进行测试

package com.zking.controller;

@RestController
public class WebsocketController {

    @Autowired
    WebSocketServer webSocketServer;
    @RequestMapping("send")
    public Results send(@RequestBody Map<String ,String > map) {
        try {
            webSocketServer.sendOneMessage(map.get("userid"),map.get("msg"));
            return Results.ok();
        } catch (Exception e) {
            return Results.err("发送失败");
        }
    }
}

3.前端配置

前端的思路：

1. 前台通过axiso异步发送请求给后端
1. socket 通过自己的方法接受前台传过来的数据，并且可以在页面中展示

var socket = new WebSocket('ws://127.0.0.1:8080/socket/888')
// 本 socket 接受到后端传递的消息处理函数
socket.onmessage =function(jg) {
    // 接受后台消息
    // 将消息添加到msgs数组中，vue 外部复制，用vue 函数变量点 
    vue.msgs.push(jg.data)
    vue.msg(jg.data)
}

前端完整代码

1.socket接受后台消息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./js/elementUI/elementUI.min.css">
    <script src="./js/vue.js"></script>
    <script src="./js/elementUI/elementUI.min.js"></script>
</head>
<body>
    <div id="app">
        <h3>接受到服务端的消息</h3>
        <ul>
            <li v-for="m in msgs">{{m}}</li>
        </ul>
    </div>
    <script src="./js/websoket消息推送前端.js"></script>
</body>
</html>

var socket = new WebSocket('ws://127.0.0.1:8080/socket/888')
// 本 socket 接受到后端传递的消息处理函数
socket.onmessage =function(jg) {
    // 接受后台消息
    // 将消息添加到msgs数组中，vue 外部复制，用vue 函数变量点 
    vue.msgs.push(jg.data)
    vue.msg(jg.data)
}

var vue = new Vue({
    el:'#app',
    data:{
        msgs:[], 
    },methods:{
        msg(msg) {
            this.$notify({
          title: '接受后端消息',
          message: msg,
        });
        }
    }
})

2.socket发送小写给后台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./js/elementUI/elementUI.min.css">
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/elementUI/elementUI.min.js"></script>
</head>
<body>
    <div id="app">
        <el-input v-model="msg" placeholder="请输入内容"></el-input>
        <br>

        <el-button @click="send()">发消息给前台</el-button>
    </div>
    <script>
        var vue = new Vue({
            el:'#app',
            data:{
                msg:null
            },
            methods:{
                send() {
                    var param ={userid:'888',msg:this.msg}
                    axios.post('http://127.0.0.1:8080/send',param).then(jg=>{
                        if(jg.data.code ==200){
                            this.$message.success('发送成功')
                        }else{
                            this.$message.error('发送失败')
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>

4.运行结果

socket测试.png

socket测试1.png

  • 自此，基本的socket配置与使用完成

4.http 与 socket 的区别

相同点：

  1. 都是基于tcp的，都是可靠性传输
  2. 都是应用层协议

不同点：

  1. Websocket是双向通信协议，模拟Socket协议，可以双向发送或接受信息
  2. HTTP是单向的
  3. WebSocket是需要浏览器和服务器进行建立连接的
  4. http是浏览器发起向服务器的连接，服务器预先并不知道这个连接

两者之间的联系：

  • WebSocket在建立握手时，数据是通过HTTP传输的。 但是建立之后，在真正传输时候不需要http协议

5. 小回顾----全局跨域配置

  • 前后端分离项目中数据传输必定会涉及到跨域的问题，解决方法有是在java后端写跨域注解即可

方法一： 在要发送给前台的Controller中写上@crossorigin

方法二： 配置全局跨域，就不用一个个在Controller上写跨域注解了

package com.zking.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //设置允许跨域的路径
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许cookie
                .allowCredentials(true)
                // 设置允许的请求方式
                .allowedMethods("*")
                // 设置允许的header属性
                .allowedHeaders("*")
                // 跨域允许时间
                // (当一个请求中可能有多个请求，每个请求都会向服务器询问，如果在3600有多次请求忽略询问，直接访问)
                .maxAge(3600);
    }
}
avatar
文章
阅读
粉丝