WebSocket的简单实现&jsp
创建一个web项目
导入依赖:
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.chu</groupId> <artifactId>webSocket</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <dependencies> <!-- servlet-api--> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> </dependency> <!-- websocket-api--> <dependency> <groupId>javax.websocket</groupId> <artifactId>javax.websocket-api</artifactId> <version>1.1</version> <!-- 设置作用域 默认compile 编译 测试 运行 provided 编译 测试 runtime 测试 运行 test 测试--> <scope>provided</scope> </dependency> <!-- JSON转换--> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.7.4</version> </dependency> </dependencies> <!-- <build>--> <!-- <plugins>--> <!-- maven自带的tomcat插件 需要配置对应的命令 tomcat7:run--> <!-- <plugin>--> <!-- <groupId>org.apache.tomcat.maven</groupId>--> <!-- <artifactId>tomcat7-maven-plugin</artifactId>--> <!-- <version>2.2</version>--> <!-- <configuration>--> <!-- <port>80</port>--> <!-- <path>/</path>--> <!-- <uriEncoding>UTF-8</uriEncoding>--> <!-- </configuration>--> <!-- </plugin>--> <!-- </plugins>--> <!-- </build>--> </project>
controller层代码:
package com.chu.controller; import com.fasterxml.jackson.databind.ObjectMapper; import javax.websocket.*; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; import java.io.IOException; import java.util.HashMap; import java.util.Map; /* 小楚想要发送信息给小赵 这个信息会先存储在服务器 再由服务器发送给小赵 */ @ServerEndpoint("/chat/{name}") public class ChatSocket { //定义一个Map集合,用来存放登陆到服务器的客户名称和Session private static Map<String,Session> mapMessage = new HashMap<>(); //首先,方法名称可以自定义 // *形参---name---Session @OnOpen//会话开始 public void onOpen(@PathParam("name")String name, Session session){ System.out.println("onOpen....."+name); //key-----name value-----session mapMessage.put(name,session); } //客户机信息处理 * 形参---Session session ---String message @OnMessage public void onMessage(Session session,String message){ System.out.println("onMessage....."+message); //服务端给客户端发消息,走的不是HTTP 而是直接推送过去了 //获取JSON对象 ObjectMapper mapper = new ObjectMapper(); try { //获取JSON格式的信息 Map<String,String> map = mapper.readValue(message, Map.class); //获取需要发送的信息:content String content = map.get("content"); //获取接收信息者:小赵 String receive = map.get("receive"); //从事先定义好的Map中获取小赵的Session Session receiveSession = mapMessage.get(receive); //如果小赵的Session为null if(receiveSession==null){ //响应:对方不在线 session.getAsyncRemote().sendText("对方不在线"); }else{ //否则将接收到的信息发送给小赵 receiveSession.getAsyncRemote().sendText(content); } } catch (IOException e) { e.printStackTrace(); } } //会话结束 @OnClose public void onClose(Session session){ System.out.println("onClose....."+session); } //会话出现异常 @OnError public void onError(Session session,Throwable e){ try { e.printStackTrace(); session.close(); } catch (IOException ex) { ex.printStackTrace(); } } }
jsp代码:
<body> <div align="center" style="padding-top: 50px"> 发送者<input id="sendOut"><br> 接收者<input id="receive"><br> 信息<input id="content"><br> <input type="button" value="注册" onclick="reg()"> <input type="button" value="提交" onclick="sendmsg()"><br> <span id="list"></span> <script type="text/javascript"> var ws; // 注册按钮 function reg() { // 注册路径 加上自己的用户名 ws = new WebSocket("ws://localhost:8080/chat/"+document.getElementById("sendOut").value) //接收服务器信息并显示 ws.onmessage = function (msg) { //接收服务器信息 var message = msg.data //获取展示信息的位置 var former = document.getElementById("list") former.innerHTML=former.innerHTML+"...他说"+message } } function sendmsg() { // 获取接收者 var receive = document.getElementById("receive").value //获取发送的内容 var content = document.getElementById("content").value //以JSON的方式发送到服务器 ws.send(‘{"receive":"‘+receive+‘","content":"‘+content+‘"}‘) //获取展示信息的位置 var former = document.getElementById("list") former.innerHTML=former.innerHTML+"...你说"+content } </script> </div> </body>