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

在《WebSocket.之.基础入门-建立连接》的代码基础之上，进行添加代码。代码只改动了：TestSocket.java 和 index.jsp 两个文件。

项目结构如下图：

TestSocket.java

 package com.charles.socket;

 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);

     }

 }

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");

         }

     }

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

     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>

 </body>

 </html>

运行我们的项目，注意 ：由于是Websocket是建立了长连接，所以当你改动了代码，之后，建议重新启动服务器。

打开浏览器，输入地址：http://localhost:8080/websocket，访问我们的项目。

注意：

　　和后台交互的时候，一定要先点击：开始建立连接。你懂的...没有建立连接的话，是不能发送消息的。

先点击，开始建立连接，然后在文本框中输入内容：我是Charles，点击消息发送，在看后台日志。

后端成功接受到了前端发送的消息。

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

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

WebSocket.之.基础入门-前端发送消息的更多相关文章

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

    WebSocket.之.基础入门-后端响应消息 在<WebSocket.之.基础入门-前端发送消息>的代码基础之上,进行添加代码.代码只改动了:TestSocket.java 和 inde ...

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

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

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

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

  4. 利用laravel-echo主动向服务端发送消息，实现在线状态管理

    之前在网上翻了半天,也没有找到关于如何 通过laravel-echo主动发送消息 和 在laravel-websockets中自定义控制器 的文章或教程.无奈之下只能翻laravel-echo和lar ...

  5. django系列6--Ajax01 特点, 基本格式, 向前端发送数据

    一.Ajax了解 AJAX(Asynchronous Javascript And XML)优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容 优点: 1.ajax使用Java ...

  6. springboot集成websocket实现向前端浏览器发送一个对象，发送消息操作手动触发

    工作中有这样一个需示,我们把项目中用到代码缓存到前端浏览器IndexedDB里面,当系统管理员在后台对代码进行变动操作时我们要更新前端缓存中的代码怎么做开始用想用版本方式来处理,但这样的话每次使用代码 ...

  7. RabbitMQ 入门系列：3、基础编码：官方SDK的引用、链接创建、单例改造、发送消息、接收消息。

    系列目录 RabbitMQ 入门系列:1.MQ的应用场景的选择与RabbitMQ安装. RabbitMQ 入门系列:2.基础含义:链接.通道.队列.交换机. RabbitMQ 入门系列:3.基础含义: ...

  8. SSM框架下使用websocket实现后端发送消息至前端

    本篇文章本人是根据实际项目需求进行书写的第一版,里面有些内容对大家或许没有用,但是核心代码本人已对其做了红色标注.文章讲解我将从maven坐标.HTML页面.js文件及后端代码一起书写. 一.mave ...

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

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

随机推荐

  1. [No0000CC]眼袋和黑眼圈的应对方法——疏筋穴

    眼袋和黑眼圈不是自然衰老的必然产物.<黄帝内经>上说:"肝主筋."筋就是人身体上的韧带.肌腱部分.很多病症,说不清原因,但都可以遵循一个原则,那就是从筋论治. 1.常按 ...

  2. spring @Order标记

    @Order标记定义了组件的加载顺序. @Order标记从spring 2.0出现,但是在spring 4.0之前,@Order标记只支持AspectJ的切面排序.spring 4.0对@Order做 ...

  3. 《HTTP - http2.0》

    推荐一首歌 - <卡路里>火箭101 杨超越真的只唱了一句! PS: 这章主要讲述了在 HTTP 发展之后的,一些扩展协议和补充,也会在这个章节对这几种协议和补充做一个比较. 1:HTTP ...

  4. 【python基础】常用的内置函数

    python基础之内置函数 参考: http://www.runoob.com/python/python-built-in-functions.html -zip() zip函数接受任意多个(包括0 ...

  5. B+树vs. LSM树（转）

    原文:<大型网站技术架构:核心原理与案例分析>,作者:李智慧 本书前面提到,由于传统的机械磁盘具有快速顺序读写.慢速随机读写的访问特性,这个特性对磁盘存储结构和算法的选择影响甚大. 为了改 ...

  6. C++取出string的一部分以及int型转成string类型

    在实际应用中,对文件的操作是十分频繁的,我们需要对文件进行拷贝,重命名等操作,这是就需要获取文件的绝对路径,一般情况下,该路径是以字符串的形式存储的,如果我们需要对文件进行重命名等,就需要对绝对路径这 ...

  7. 8-GPIO复用

    8-GPIO引脚复用与重映射 0.通用GPIO 在复位期间及复位刚刚完成后,复用功能尚未激活,I/O 端口被配置为输入浮空模式. 复位后,调试引脚处于复用功能上拉/下拉状态: ● PA15:JTDI ...

  8. SpringBoot-@async异步执行方法

    启动加上@EnableAsync ,需要执行异步方法上加入  @Async 在方法上加上@Async之后 底层使用多线程技术 演示代码: @RestController @Slf4j public c ...

  9. java实现消息队列的两种方式

    https://blog.csdn.net/fenfenguai/article/details/79257928

  10. 将gitlab中的postgresql数据库开通远程访问

    postgresql数据库是gitlab的一个配置数据库,记录gitlab的一些配置信息. 我们访问gitlab中的postgresql数据有本地命令行访问和远程可视化软件访问2种方式. (一)本地命 ...