1.WebSocket编程—Hello World

Wesley13
• 阅读 646

1.引入jar包

<dependencies>
        <!-- servlet -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.0.1</version>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        
        <!-- https://mvnrepository.com/artifact/javax/javaee-api -->
        <dependency>
            <groupId>javax</groupId>
            <artifactId>javaee-api</artifactId>
            <version>7.0</version>
        </dependency>
        
        <!-- https://mvnrepository.com/artifact/javax.websocket/javax.websocket-api -->
        <dependency>
            <groupId>javax.websocket</groupId>
            <artifactId>javax.websocket-api</artifactId>
            <version>1.0</version>
            <scope>provided</scope>
        </dependency>

    </dependencies>

    服务器使用的是Tomcat7,它自带了websocket-api.jar,所以在pom.xml中的javax.websocket-api使用了scope=provided,方便调试。

2.编写服务端代码

package cn.net.bysoft.websocketapp.lesson1;

import javax.websocket.OnMessage;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/echo")
public class EchoServer {
    
    @OnMessage
    public String echo(String incomingMessage) {
        return "I got this (" + incomingMessage + ") so I am sending it back !";
    }
}

    服务端代码是简单的POJO,加入了两个注解,@ServerEndpoint声明了Socket端点,@OnMessage声明了消息处理函数。

3.编写客户端代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Socket JavaScript Echo Client</title>
</head>
<body>
    <h1>Echo Server</h1>

    <div style="text-align: left;">
        <form action="">
            <input onclick="send_echo();" value="Press to send" type="button">
            <input id="textID" name="message" value="Hello Web Sockets"
                type="text"> <br>
        </form>
    </div>

    <div id="output"></div>
</body>

<script>
    var echo_websocket;

    function init() {
        output = document.getElementById("output");
    }

    function send_echo() {
        // 定义websocket的端点地址
        var wsUri = "ws://localhost:8080/websocketapp/echo";
        writeToScreen("Connecting to " + wsUri);
        // 创建websocket对象
        echo_websocket = new WebSocket(wsUri);
        
        // 打开websocket
        echo_websocket.onopen = function(evt) {
            writeToScreen("connected!");
            // 发送文本框中的内容到服务端
            doSend(textID.value);
        }
        
        // 接收到服务端处理的数据
        echo_websocket.onmessage = function(evt) {
            writeToScreen("Received message: " + evt.data);
            // 关闭websocket
            echo_websocket.close();
            writeToScreen("Closed!");
        }

        echo_websocket.onerror = function(evt) {
            writeToScreen("<span style='color: red'>ERROR:</span>" + evt.data);
            echo_websocket.close();
        }
    }

    function doSend(message) {
        echo_websocket.send(message);
        writeToScreen("Sent message:" + message);
    }

    function writeToScreen(message) {
        var pre = document.createElement("p");
        pre.style.wordWrap = "break-word";
        pre.innerHTML = message;
        output.appendChild(pre);
    }

    window.addEventListener("load", init, false);
</script>
</html>

    接下来是客户端是测试代码,点击按钮进行测试。

1.WebSocket编程—Hello World

源码地址:https://github.com/XuePeng87/websocketapp

点赞
收藏
评论区
推荐文章
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Easter79 Easter79
3年前
springboot整合redisson分布式锁
一、通过maven引入redisson的jar包<dependency<groupIdorg.redisson</groupId<artifactIdredisson</artifactId<version3.6.5</version
Easter79 Easter79
3年前
springboot+idea+jsp 404问题
我是这么解决的对于单一项目,加入以下jar包即可。<!前台页面的支持<dependency<groupIdjavax.servlet</groupId<artifactIdjavax.servletapi</artifactId
Easter79 Easter79
3年前
springBoot配置activeMq点对点模式消费信息以及独占模式消费如何设置
1、在pom文件中引入对应jar包<!activeMQstart<dependency<groupIdorg.springframework.boot</groupId<artifactIdspringbootstarteractivemq</artifactId
Easter79 Easter79
3年前
spring集成kafka
1、引入依赖jar包<dependency<groupIdorg.springframework.kafka</groupId<artifactIdspringkafka</artifactId</dependency2、配置kafka信息
Stella981 Stella981
3年前
FastDFS上传文件
导入相应的依赖<dependencies<dependency<groupIdorg.csource.fastdfs</groupId<artifactIdfastdfs</artifactId<ve
Stella981 Stella981
3年前
Redis SpringBoot 整合
1.首先导入使用Maven导入jar包<dependency        <groupIdorg.springframework.boot</groupId        <artifactIdspringbootstarterdataredis</artifactId
Easter79 Easter79
3年前
Springmvc 发送邮件功能
1、引入相关jar包<dependency<groupIdorg.apache.velocity</groupId<artifactIdvelocity</artifactId<version1.7</version</dependency
Wesley13 Wesley13
3年前
MongoDB简单的增删改查
首先引入mongoDB的jar包<dependencies  <dependency    <groupIdorg.mongodb</groupId    <artifactIdmongojavadriver</artifactId    <version3.0.4</version  </dependency
Easter79 Easter79
3年前
SpringMVC后台数据校验
第①步:引入依赖<!数据校验<dependency<groupIdorg.hibernate</groupId<artifactIdhibernatevalidator</artifactId<ve