WebSocket.之.基础入门-后端响应消息

在《WebSocket.之.基础入门-前端发送消息》的代码基础之上，进行添加代码。代码只改动了：TestSocket.java 和 index.jsp 两个文件。

项目结构如下：

TestSocket.java 代码

 package com.charles.socket;

 import java.io.IOException;

 import javax.websocket.OnMessage;

 import javax.websocket.OnOpen;

 import javax.websocket.Session;

 import javax.websocket.server.ServerEndpoint;

 @ServerEndpoint(value = "/helloSocket")

 public class TestSocket {

     /***

      * 当建立链接时，调用的方法.

      * @param session

      */

     @OnOpen

     public void open(Session session) {

         System.out.println("开始建立了链接...");

         System.out.println("当前session的id是：" + session.getId());

     }

     /***

      * 处理消息的方法.

      * @param session

      */

     @OnMessage

     public void message(Session session, String data) {

         System.out.println("开始处理消息...");

         System.out.println("当前session的id是：" + session.getId());

         System.out.println("从前端页面传过来的数据是：" + data);

         String message = "你好，我是后端程序...";

         try {

             session.getBasicRemote().sendText(message);

         } catch (IOException e) {

             e.printStackTrace();

         }

     }

 }

index.jsp 代码

 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>Charles-WebSocket</title>

 <script type="text/javascript">

     var websocket = null;

     var target = "ws://localhost:8080/websocket/helloSocket";

     function buildConnection() {

         if('WebSocket' in window) {

             websocket = new WebSocket(target);

         } else if('MozWebSocket' in window) {

             websocket = MozWebSocket(target);

         } else {

             window.alert("浏览器不支持WebSocket");

         }

         // 添加监听消息的方法

         websocket.onmessage = function(event) {

              console.log(event)

              console.log(event.data)

              document.getElementById("serverMsg").innerHTML = "<p>后端消息 ："+ event.data +"</p>"

         }

     }

     // 往后台服务器发送消息.

     function sendMessage() {

         var sendmsg = document.getElementById("sendMsg").value;

         console.log("发送的消息：" + sendmsg);

         // 发送至后台服务器中.

         websocket.send(sendmsg);

     }

 </script>

 </head>

 <body>

     <button onclick="buildConnection();">开始建立链接</button>

     <hr>

     <input id="sendMsg" /> <button onclick="sendMessage();">消息发送</button>

     <div id="serverMsg"></div>

 </body>

 </html>

运行项目，由于改动了代码，建议：重新启动Tomcat服务器。

项目启动后，通过浏览器访问页面，地址：http://localhost:8080/websocket

注意：

　　一定要先点击，开始建立连接按钮，然后输入内容，在点击消息发送...你懂的.

现在看后端日志....

前端能发送消息，后端也能响应，一切OK...

如有问题，欢迎纠正！！！

如有转载，请标明源处：https://www.cnblogs.com/Charles-Yuan/p/9784555.html

WebSocket.之.基础入门-后端响应消息的更多相关文章

  1. WebSocket.之.基础入门-前端发送消息

    WebSocket.之.基础入门-前端发送消息 在<WebSocket.之.基础入门-建立连接>的代码基础之上,进行添加代码.代码只改动了:TestSocket.java 和 index. ...

  2. WebSocket.之.基础入门-断开连接处理

    ebSocket.之.基础入门-断开连接处理 在<WebSocket.之.基础入门-后端响应消息>的代码基础之上,继续更新代码.代码只改动了:TestSocket.java 和 index ...

  3. WebSocket.之.基础入门-建立连接

    WebSocket.之.基础入门-建立连接 1. 使用开发工具(STS.Eclipse等)创建web项目.如下图所示,啥东西都没有.一个新的web项目. 2. 创建java类.index.jsp页面. ...

  4. C# 消息队列之 RabbitMQ 基础入门

    Ø  简介 C# 实现消息队列的方式有很多种,比如:MSMQ.RabbitMQ.EQueue 等,本文主要介绍使用 RabbitMQ 实现消息队列的基础入门.包括如下内容: 1.   什么是消息队列? ...

  5. ASP.NET Core消息队列RabbitMQ基础入门实战演练

    一.课程介绍 人生苦短,我用.NET Core!消息队列RabbitMQ大家相比都不陌生,本次分享课程阿笨将给大家分享一下在一般项目中99%都会用到的消息队列MQ的一个实战业务运用场景.本次分享课程不 ...

  6. [转]小D课堂 - 零基础入门SpringBoot2.X到实战_汇总

    原文地址:https://www.cnblogs.com/wangjunwei/p/11392825.html 第1节零基础快速入门SpringBoot2.0 小D课堂 - 零基础入门SpringBo ...

  7. 小D课堂 - 零基础入门SpringBoot2.X到实战_汇总

    第1节零基础快速入门SpringBoot2.0 小D课堂 - 零基础入门SpringBoot2.X到实战_第1节零基础快速入门SpringBoot2.0_1.SpringBoot2.x课程介绍和高手系 ...

  8. 【01】SpringBoot2核心技术-基础入门

    SpringBoot 2 1. SpringBoot2核心技术-基础入门 01 Spring与SpringBoot 1.Spring 能做什么 1.1 Spring的能力 微服务:将一个应用的所有功能 ...

  9. Swift语法基础入门四(构造函数, 懒加载)

    Swift语法基础入门四(构造函数, 懒加载) 存储属性 具备存储功能, 和OC中普通属性一样 // Swfit要求我们在创建对象时必须给所有的属性初始化 // 如果没办法保证在构造方法中初始化属性, ...

随机推荐

  1. FutureTask的用法及两种常用的使用场景

    FutureTask可用于异步获取执行结果或取消执行任务的场景.通过传入Runnable或者Callable的任务给FutureTask,直接调用其run方法或者放入线程池执行,之后可以在外部通过Fu ...

  2. ROADS POJ - 1724 约束最短路 暴搜 加剪枝

    http://poj.org/problem?id=1724 题意:最短路的模板,不过每条边加上一个费用,要求总费用不超过k 题解:不能用dijkstra ,直接暴力,dfs维护len和cost. 普 ...

  3. 关于ionic如何到最新版本

    首先删除 我叫他它叫做依赖node_modules 文件夹然后修改 修改依赖版本package.json 各个文件的版本号接着下载 下载最新的依赖 会根据package.json 各个文件的版本号添加 ...

  4. Linux的磁盘系统和文件系统显示的文件大小为什么不一样(du指令和ls指令的区别)

    写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...

  5. iOS之WKWebView加载的网页自适应大小

    一,前言 有时候在WKWebView加载页面后会发现页面的字会很小, 这是因为原网页没有做手机屏幕尺寸的适配, 那么在后台不做调整的情况下我们移动端怎样来适配页面呢? 以下代码可以适配大小(原本不可以 ...

  6. [daily][dpdk] 内核模块(网卡驱动)无法卸载

    由于程序的异常退出, 内核的引用计数没有被清除(我猜的). 所以驱动不能被卸载掉, 强制也不行. 如下: [root@localhost ~]# insmod /opt/scorpion/KingKo ...

  7. Blender 使用

    教程: 1.https://www.youtube.com/watch?v=N8-mE-165b8&index=7&list=PLE885296A496C3D38 快捷键: http: ...

  8. rem设置

    html{ font-size:10vw; }

  9. Servlet----------ServletConfig

    1. 什么是 ServletConfig servletConfig对象:用于封装servlet的配置信息.从一个servlet被实例化后,对任何客户端在任何时候访问有效,但仅对servlet自身有效 ...

  10. 【JMeter】【性能测试】响应信息不明确的接口做关联

    1:做接口关联的时候,发现接口响应没有可以利用的信息.如下图只返回了一个成功的标识,这样的接口如何与之关联? 通过抓包观察后续的修改功能,发现需要传入一个id和一个title.但是前面的接口没有返回, ...