精华内容
下载资源
问答
  • 项目结构如下图: TestSocket.java package com.charles.socket; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websock...

    项目结构如下图:

    33357527c7b06f63b0293469f03abc0c154.jpg

    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>

    注意:

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

    f2f6370a451a01a83682c64a37abe6e235d.jpg

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

    d83feaa70627b8e64a9d5026de88aca2f96.jpg

    e8cbf6ce2b36648397c9d9a83d685f0b998.jpg

    转载于:https://my.oschina.net/u/4193800/blog/3097864

    展开全文
  • 基础入门-前端发送消息 在《WebSocket.之.基础入门-建立连接》的代码基础之上,进行添加代码。代码只改动了:TestSocket.java 和 index.jsp 两个文件。 项目结构如下图: TestSocket.java 1 package ...

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

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

     项目结构如下图:

     

    TestSocket.java

     1 package com.charles.socket;
     2 
     3 import javax.websocket.OnMessage;
     4 import javax.websocket.OnOpen;
     5 import javax.websocket.Session;
     6 import javax.websocket.server.ServerEndpoint;
     7 
     8 @ServerEndpoint(value = "/helloSocket")
     9 public class TestSocket {
    10 
    11     /***
    12      * 当建立链接时,调用的方法.
    13      * @param session
    14      */
    15     @OnOpen
    16     public void open(Session session) {
    17         
    18         System.out.println("开始建立了链接...");
    19         System.out.println("当前session的id是:" + session.getId());
    20     }
    21     
    22     /***
    23      * 处理消息的方法.
    24      * @param session
    25      */
    26     @OnMessage
    27     public void message(Session session, String data) {
    28         
    29         System.out.println("开始处理消息...");
    30         System.out.println("当前session的id是:" + session.getId());
    31         System.out.println("从前端页面传过来的数据是:" + data);
    32     }
    33 }

     

    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     // 往后台服务器发送消息.
    25     function sendMessage() {
    26         
    27         var sendmsg = document.getElementById("sendMsg").value;
    28         console.log("发送的消息:" + sendmsg);
    29         
    30         // 发送至后台服务器中.
    31         websocket.send(sendmsg);
    32     }
    33     
    34 </script>
    35 </head>
    36 <body>
    37     
    38     <button onclick="buildConnection();">开始建立链接</button>
    39     <hr>
    40     <input id="sendMsg" /> <button onclick="sendMessage();">消息发送</button>
    41 
    42 </body>
    43 </html>

     

     

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

     

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

    注意:

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

     

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

     

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

     

    如有问题,欢迎纠正!!!

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

     

    转载于:https://www.cnblogs.com/Charles-Yuan/p/9784458.html

    展开全文
  • WebSocket前端准备SockJS:SockJS 是一个浏览器上运行的 JavaScript 库,如果浏览器不支持 WebSocket,该库可以模拟对 WebSocket 的支持,实现浏览器和 Web 服务器之间低延迟、全双工、跨域的通讯通道。StompStomp ...

    WebSocket前端准备

    SockJS:

    SockJS 是一个浏览器上运行的 JavaScript 库,如果浏览器不支持 WebSocket,该库可以模拟对 WebSocket 的支持,实现浏览器和 Web 服务器之间低延迟、全双工、跨域的通讯通道。

    Stomp

    Stomp 提供了客户端和代理之间进行广泛消息传输的框架。Stomp 是一个非常简单而且易用的通讯协议实现,尽管代理端的编写可能非常复杂,但是编写一个 Stomp 客户端却是很简单的事情,另外你可以使用 Telnet 来与你的 Stomp 代理进行交互。

    发送公告功能

    html代码

    javascript代码

    相关说明:

    关于JavaScript实现WebSocket的功能很简单,基本分以下几步:

    开启Socket

    var socket = new SockJS('/socket'); 先构建一个SockJS对象

    stompClient = Stomp.over(socket); 用Stomp将SockJS进行协议封装

    stompClient.connect() 与服务端进行连接,同时有一个回调函数,处理连接成功后的操作信息。

    发送消息

    stompClient.send("/app/change-notice", {}, value);

    页面预览:

    Paste_Image.png

    修改公告功能

    当我们发送公告后,将上图的公告信息在不刷新页面的情况下,使用WebSocket将其改变。发送公告的前端代码已经完成,现在我们来写另一个客户端,用来接收第一个页面发送的公告,展示在上图红框中。

    功能比较简单,所以下面只给出部分js代码:

    相关说明:

    这里与发送公告代码不同的是,在stompClient建立连接成功之后,我们要监听服务端发送过来的信息,接收到之后,改变页面上公告的内容,所以用到了stompClient.subscribe()

    这个subscribe()方法功能就是定义一个订阅地址,用来接收服务端的信息(在服务端代码中,我们在@SendTo中指定了这个订阅地址“/topic/notice”),当收到消息后,在回调函数中处理业务逻辑。

    至此,所有的功能开发完毕!

    效果演示

    首先我们发布一条公告:

    然后我们切到另一个页面,发现内容已变:

    展开全文
  • 请点击以下链接跳转至本人博客园对应文章:SSM框架下使用websocket实现后端发送消息前端

    请点击以下链接跳转至本人博客园对应文章:SSM框架下使用websocket实现后端发送消息至前端

    展开全文
  • packagecom.yjlc.platform.utils.webSocket;importcom.alibaba.fastjson.JSON;importcom.yjlc.platform.User;import javax.websocket.*;importjavax.websocket.server.PathParam;importjavax.websocket.server.Serve...
  • 工作中有这样一个需示,我们把项目中用到代码缓存到前端浏览器IndexedDB里面,当系统管理员在后台对代码进行变动操作时我们要更新前端缓存中的代码怎么做开始用想用版本方式来处理,但这样的话每次使用代码之前都...
  • WebSocket协议简介WebSocket是html5规范新引入的功能,用于解决浏览器与后台服务器双向通讯的问题,使用WebSocket技术,后台可以随时向前端推送消息,以保证前后台状态统一,在传统的无状态HTTP协议中,这是“无法...
  • 最近聊天室项目遇到了这样一个操蛋的问题:前端监听subscribe后端的topicHome和topicChat两个接口,但永远只有topicChat接口有返回。前后端排除问题一个多小时定位到了后端出现的问题: 原先后端webSocket配置的...
  • 本文介绍如何使用websocket发送和请求消息 项目目录 依赖 DemoApplication MessageModel WebConfig WebSocketConfig HttpHandshakeInterceptor WebSocketEventListener WebSocketController 前端测试 本文介绍...
  • 后端-springboot+socket 1、直接导入项目,Maven项目 ...前端-vue 1、npm install 2、npm run serve 3、进入页面,打开F12找到console,点击:点击请求数据 就可以看到了 一定要先启动后台 ...
  • Socket.io是一个简单的小类库,本篇文章将讲解如何使用Socket.io类库,如何在服务器端和客户端使用 Socket.io类库,以及常用的方法,怎么创建一个Socket.io服务器,如何在服务器和客户端之间互相发送消息和事件,...
  • * 给指定身份发送消息 * @param message * @param flag * @throws IOException */ public void sendMessageToFlag(String message,String flag){ try{ boolean online = true; for (WebSocketUtils...
  • 另一个服务端后端定时查询数据库数据,建立一个socket服务端,前台websocket模拟http请求连接socket,长连接接收消息,处理之后在页面上显示; 后台代码: using System; using System.Collections; ...
  • 后端发送时,需要把Map转为Json用阿里的fastJson就可以, webSocketMap.get(en.get...前端接收时,在把接收到的字符串转为JS对象(即Json对象)。 //获得消息事件 socket.onmessage = function (MessageEvent) { c
  • 前端 <%@ page language="java" pageEncoding="UTF-8" %> <!DOCTYPE html> <html> <head> <title>Java后端WebSocket的Tomcat实现</title> </head> <body>...
  • 前言在一次项目开发中,使用到了Netty网络应用框架,以及MQTT进行消息数据的收发,这其中需要后台来将获取到的消息主动推送给前端,于是就使用到了MQTT,特此记录一下。一、什么是websocketWebSocket协议是基于TCP...
  • websocket项目,在本地运行那是妥妥的没有问题,在当部署到客户的uat环境的时候,就出现了诡异的情况:本人vpn拨号,可以正常的访问,但是客户那边的电脑登陆到系统,只要有消息前端jsp页面发送数据,后台就报错,...
  • 理论上前台应该发送消息到/api/test时Controller类应该能接收到消息,但是发送消息后未能进入controller类 html就不贴了,js前端代码如下 ``` window.onload=function(){ var sockJs=new SockJS("/stomp");...
  • 用springboot实现服务端(后台)想前端发送消息通知 二、项目背景 假设有一个用户前往医院找专家看病的场景,一个专家对应多个用户,当第一个用户看病结束后通知第二用户前往房间, 传统的模式都是服务端发起...
  • 三方框架版本SpringCloudDalston.SR4SpringBoot1.5.10spring-cloud-starter-zuul1.3.5现在需要将异步任务的结果通过websocket通知前端,希望可以websocket连接穿透zuul网关访问内部的websocket server微服务。...
  • <... <head> </head> <...a href="javascript:WebSocketTest()...发送消息</a> </div> <script> <!--在引用的页面 的最后 使用以下语句 开启 通信--> <!--revieMsg 是逻辑处.
  • 小编先习惯性的看了下某中文百科网站对Web Socket的...如果大家按照这个答案去参加BAT等互联网公司的前端开发面试,估计会被鄙视。还是让我们阅读一些英文材料吧。让我们直接看stackoverflow上的原文,然后翻译:...
  • 工作中有这样一个需示,我们把项目中用到代码缓存到前端浏览器IndexedDB里面,当系统管理员在后台对代码进行变动操作时我们要更新前端缓存中的代码怎么做开始用想用版本方式来处理,但这样的话每次使用代码之前都...

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 224
精华内容 89
关键字:

websocket前端发送消息