WebSocket与java通讯

最新推荐文章于 2024-07-21 07:00:00 发布

qq_32587949

最新推荐文章于 2024-07-21 07:00:00 发布

阅读量411

点赞数

分类专栏： javaWeb 文章标签： WebSocket java ServerEndpoint

本文链接：https://blog.csdn.net/qq_32587949/article/details/83148744

版权

javaWeb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、编写目的

传统的HTTP协议是无状态的，每次请求（request）都要由客户端（如浏览器）主动发起，服务端进行处理后返回response结果，而服务端很难主动向客户端发送数据；这种客户端是主动方，服务端是被动方的传统Web模式对于信息变化不频繁的Web应用来说造成的麻烦较小，而对于涉及实时信息的Web应用却带来了很大的不便。HTML5中支持WebSocket，其底层通讯协议是TCP，服务端与客户端可以很方便进行通讯。

2、实现步骤

①编写java后端，创建javaWeb项目，需要引入相关依赖

<dependency>
    <groupId>javax</groupId>
    <artifactId>javaee-api</artifactId>
    <version>7.0</version>
    <scope>provided</scope>
</dependency>

②编写WebSocketTest类

package com.amarsoft;

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;

@ServerEndpoint("/websocket")
public class WebSocketTest {
    @OnOpen
    public void onOpen(Session session){
        System.out.println("建立连接");
    }

    @OnClose
    public void onClose(){
        System.out.println("关闭连接");
    }

    @OnMessage
    public void onMessage(String message, Session session){
        System.out.println("receive："+message);
        try {
            session.getBasicRemote().sendText("你好呀！！！");
        } catch (IOException e) {
            e.printStackTrace();
        }

    }
}

③编写前端代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div id="sse">
    <input id="content" type="text" placeholder="请输入您需要发送的消息">
    <button onclick="send()">发送</button>
    <div id="logs"></div>
</div>
<script type="text/javascript">
    var ws = null;
    if ("WebSocket" in window)
    {
        ws = new WebSocket("ws://localhost:8080/websocket");
    }else{
        alert("浏览器暂时不支持websocket");
    }
    ws.onopen = function()
    {
    };

    ws.onmessage = function (evt)
    {
        var received_msg = evt.data;
        //将数据添加到日志div中去
        var logsDiv = document.getElementById("logs");
        var newDiv = document.createElement('div');
        newDiv.style.textAlign="right"
        newDiv.innerText="服务器："+received_msg;
        logsDiv.append(newDiv);
    };

    ws.onclose = function()
    {
    };
    function send(){
        //1、获取输入框中的内容
        var logsDiv = document.getElementById("logs");
        var content = document.getElementById("content").value;
        //2、发送数据
        ws.send(content);
        //3、将数据添加到日志div中去
        var newDiv = document.createElement('div');
        newDiv.style.textAlign="left"
        newDiv.innerText="我："+content;
        logsDiv.append(newDiv);
        //4、清空输入框
        document.getElementById("content").value="";
    }
    window.onload=function(){
        document.getElementById("content").onkeydown=function(evet){
            if(evet.keyCode == 13){
                send();
            }
        }
    }
</script>
</body>
</html>

④运行效果