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

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

项目结构如下：

TestSocket.java 代码

  1.  package com.charles.socket;
  2.  
  3.  import java.io.IOException;
  4.  
  5.  import javax.websocket.OnMessage;
  6.  import javax.websocket.OnOpen;
  7.  import javax.websocket.Session;
  8.  import javax.websocket.server.ServerEndpoint;
  9.  
  10.  @ServerEndpoint(value = "/helloSocket")
  11.  public class TestSocket {
  12.  
  13.      /***
  14.       * 当建立链接时，调用的方法.
  15.       * @param session
  16.       */
  17.      @OnOpen
  18.      public void open(Session session) {
  19.  
  20.          System.out.println("开始建立了链接...");
  21.          System.out.println("当前session的id是：" + session.getId());
  22.      }
  23.  
  24.      /***
  25.       * 处理消息的方法.
  26.       * @param session
  27.       */
  28.      @OnMessage
  29.      public void message(Session session, String data) {
  30.  
  31.          System.out.println("开始处理消息...");
  32.          System.out.println("当前session的id是：" + session.getId());
  33.          System.out.println("从前端页面传过来的数据是：" + data);
  34.  
  35.          String message = "你好，我是后端程序...";
  36.          try {
  37.              session.getBasicRemote().sendText(message);
  38.          } catch (IOException e) {
  39.              e.printStackTrace();
  40.          }
  41.  
  42.      }
  43.  }

index.jsp 代码

  1.  <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2.  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3.  <html>
  4.  <head>
  5.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.  <title>Charles-WebSocket</title>
  7.  
  8.  <script type="text/javascript">
  9.  
  10.      var websocket = null;
  11.      var target = "ws://localhost:8080/websocket/helloSocket";
  12.  
  13.      function buildConnection() {
  14.  
  15.          if('WebSocket' in window) {
  16.              websocket = new WebSocket(target);
  17.          } else if('MozWebSocket' in window) {
  18.              websocket = MozWebSocket(target);
  19.          } else {
  20.              window.alert("浏览器不支持WebSocket");
  21.          }
  22.  
  23.          // 添加监听消息的方法
  24.          websocket.onmessage = function(event) {
  25.               console.log(event)
  26.               console.log(event.data)
  27.               document.getElementById("serverMsg").innerHTML = "<p>后端消息 ："+ event.data +"</p>"
  28.          }
  29.      }
  30.  
  31.      // 往后台服务器发送消息.
  32.      function sendMessage() {
  33.  
  34.          var sendmsg = document.getElementById("sendMsg").value;
  35.          console.log("发送的消息：" + sendmsg);
  36.  
  37.          // 发送至后台服务器中.
  38.          websocket.send(sendmsg);
  39.      }
  40.  
  41.  </script>
  42.  </head>
  43.  <body>
  44.  
  45.      <button onclick="buildConnection();">开始建立链接</button>
  46.      <hr>
  47.      <input id="sendMsg" /> <button onclick="sendMessage();">消息发送</button>
  48.      <div id="serverMsg"></div>
  49.  
  50.  </body>
  51.  </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. find实现特殊功能示例

    find列出目录下所有文件: # find /shell-script/ # find /shell-script/ -print find列出文件夹中所有开头为text的文件,参数-iname意思忽 ...

  2. canvas 线性规划

    小结: 1.线性规划 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  3. 新浪广告交易平台（SAX）DSP手册

    新浪广告交易平台(SAX)DSP手册 http://amp.ad.sina.com.cn/sax/doc/zh-CN/xhtml/index.xhtml 新浪广告交易平台(SAX)DSP手册 版权 © ...

  4. Win10+Ubuntu18.04 UEFI启动模式SSD+HDD

    新手操作徒手安装Ubuntu,踩坑无数. 分享一篇好的经验:https://blog.csdn.net/xrinosvip/article/details/80428133(下附原博客) 踩坑大集合: ...

  5. [skill][vim] 常用技巧与配置

    一:  光标行列高亮 可以使用 :help highlight 查看相信帮助可颜色配置. set cursorline set cursorcolumn highlight Cursorline ct ...

  6. ATL Thunk机制深入分析

    如果你有SDK的编程经验,就一定应该知道在创建窗口时需要指定窗口类,窗口类中的一种重要的参数就是窗口过程.任何窗口接收到的消息,都是由该窗口过程来处理. 在面向对象编程中,如果还需要开发人员来使用原始 ...

  7. 集合求交集 & 去除列表中重复的元素

    集合求交集: set1 = {1,2,3,4,5} set2 = {4,5,6,7,8} 交集:set3 = set1 & set2 print(ste3) #结果为{4,5} 或者ste1. ...

  8. nodejs 学习二， nodejs调试

    nodejs 调试,在官方文档(英文),常用的两种: 一个在chrome安装插件inspector 第二种利用编辑 这里我使用vscode编辑来调试. 主要是配置 launch.json(用vscod ...

  9. oracle sqlplus login.sql设置

    sqlplus在启动时会自动运行两个脚本:glogin.sql.login.sql这两个文件 执行顺序为 1.默认在在$ORACLE_HOME/sqlplus/admin路径下查找glogin.sql ...

  10. 【BP算法】

    一.符号定义:  al: 第l层的输出值(经过了激活函数).在DNN中是向量,在CNN中是张量. σ:激活函数的表达形式. zl: 第l层的输出值(未经过激活函数).在DNN中是向量,在CNN中是张量 ...