分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

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

发布时间:2023-09-06 02:18责任编辑:蔡小小关键词:Web后端

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 session16 ?????*/17 ????@OnOpen18 ????public void open(Session session) {19 ????????20 ????????System.out.println("开始建立了链接...");21 ????????System.out.println("当前session的id是:" + session.getId());22 ????}23 ????24 ????/***25 ?????* 处理消息的方法.26 ?????* @param session27 ?????*/28 ????@OnMessage29 ????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 ????????36 ????????String message = "你好,我是后端程序...";37 ????????try {38 ????????????session.getBasicRemote().sendText(message);39 ????????} catch (IOException e) {40 ????????????e.printStackTrace();41 ????????}42 ????????43 ????}44 }

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.之.基础入门-后端响应消息

原文地址:https://www.cnblogs.com/Charles-Yuan/p/9784555.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved