webSocket接口服务，及JS客户端调用

伪代码农民工

已于 2022-11-24 09:38:07 修改

阅读量3.8k

点赞数 19

分类专栏： JAVA webSocket 接口技术文章标签： websocket java 网络协议

于 2022-11-22 17:32:58 首次发布

本文链接：https://blog.csdn.net/qq_41368391/article/details/127986261

版权

接口技术同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

JAVA

2 篇文章 0 订阅

订阅专栏

webSocket

1 篇文章 0 订阅

订阅专栏

WebSocket接口服务实例，及JS客户端调用

服务端Controller

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.annotation.Resource;
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.concurrent.ConcurrentHashMap;

@Slf4j
@Component
@ServerEndpoint("/websocket/{name}")
public class WebSocketController {

    /**
     * 与某个客户端的连接对话，需要通过它来给客户端发送消息
     */
    private Session session;
    /**
     * 标识当前连接客户端的用户名
     */
    private String name;

    private static ConcurrentHashMap<String, WebSocketController> websocketSet = new ConcurrentHashMap<>();

    @OnOpen
    public void OnOpen(Session session, @PathParam(value = "name") String name) {
        this.session = session;
        this.name = name;
        //name是用来表示唯一客户端，如果需要指定发送，需要指定发送通过name来区分
        websocketSet.put(name, this);
        log.info("[WebSocket]连接成功，当前连接人数为={}", websocketSet.size());
    }

    @OnClose
    public void OnClose() {
        websocketSet.remove(this.name);
        log.info("[WebSocket]退出成功，当前连接人数为={}", websocketSet.size());
    }

    @OnMessage
    public void OnMessage(String message) {
        log.info("[WebSocket]收到消息={}", message);
        groupSending("客户端的消息我已经收到了");
    }

    public void groupSending(String message) {
        String user= "user";//服务端指定接收消息的用户
        try {
            if(websocketSet.get(user) != null) {
                websocketSet.get(user).session.getBasicRemote().sendText(message);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
//        for (String name : websocketSet.keySet()) {
//            try {
//                websocketSet.get(name).session.getBasicRemote().sendText(message);
//            } catch (IOException e) {
//                e.printStackTrace();
//            }
//        }
    }
}

maven引入的帮助类

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

发布服务之后可用接口地址访问：

ws://localhost:8080/websocket/user

但是目前一般前端调用websocket接口，都是采取wss协议地址：

wss://域名/websocket/user

这时需要重新配置一份nginx_webSocket.conf:

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;
events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    
    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;

    server {
        listen       80;
        server_name  serverIp;

        #charset koi8-r;
        ssl_certificate cert/com.crt;
        ssl_certificate_key cert/com.key;

        #access_log  logs/host.access.log  main;
        location /websocket {
           proxy_pass http://serverIp:port;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection "upgrade";
           proxy_set_header Host $host;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
}

配置完成后，重启nginx_webSocket.conf，即可通过wss协议地址访问该接口。
JS客户端调用实例：

  <html> 
     <head> 
         <title>WebSoket Demo</title> 
         <script type="text/javascript"> 
             //验证浏览器是否支持WebSocket协议
             if (!window.WebSocket) { 
                 alert("WebSocket not supported by this browser!"); 
             } 
              var ws;
             function display() { 
                         var websocket = null;
						if ('WebSocket' in window) {
							//用于创建WebSocket对象，webSocketTest对应的是java类的注解值。
							websocket = new WebSocket("wss://域名/websocket/user");
						} else {
							alert("当前浏览器不支持");
						}
				//        连接发生错误的时候回调方法；
						websocket.onerror = function () {
							alert("连接错误");
						}
				//       连接成功时建立回调方法
						websocket.onopen = function () {
							//WebSocket已连接上，使用send()方法发送数据
							alert("连接成功");
						};
				//      收到消息的回调方法
						websocket.onmessage = function (msg) {
							setdivInnerHTML(msg.data);
						};
						//连接关闭的回调方法
						websocket.onclose = function () {
							closed();
							alert("关闭成功");
						};
             } 
			 function closed() {
							websocket.close();
							alert("点击关闭");
						}
            var log = function(s) {  
				if (document.readyState !== "complete") {  
					log.buffer.push(s);  
				} else {  
					document.getElementById("contentId").innerHTML += (s + "\n");  
				}  
			}  
             function sendMsg(){
                 var msg=document.getElementById("messageId");
                 alert(msg.value);
                 ws.send(msg.value); 
             }
         </script> 
     </head> 
     <body onload="display();"> 
         <div id="valueLabel"></div> 
         <textarea rows="20" cols="30" id="contentId"></textarea>
         <br/>
         <input name="message" id="messageId"/>
         <button id="sendButton" onClick="javascript:sendMsg()" >Send</button>
     </body> 
</html>