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