WebSocket的简单实现&jsp

Posted 2021-03-17 cje330039879

创建一个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代码：

 1 <body>
 2 <div align="center" style="padding-top: 50px">
 3 
 4     发送者<input id="sendOut"><br>
 5 
 6     接收者<input id="receive"><br>
 7 
 8     信息<input id="content"><br>
 9 
10     <input type="button" value="注册" onclick="reg()">
11 
12     <input type="button" value="提交" onclick="sendmsg()"><br>
13 
14     <span id="list"></span>
15 
16     <script type="text/javascript">
17         var ws;
18         // 注册按钮
19         function reg() {
20             // 注册路径 加上自己的用户名
21             ws = new WebSocket("ws://localhost:8080/chat/"+document.getElementById("sendOut").value)
22             //接收服务器信息并显示
23             ws.onmessage = function (msg) {
24                 //接收服务器信息
25                 var message = msg.data
26                 //获取展示信息的位置
27                 var former = document.getElementById("list")
28                 former.innerhtml=former.innerHTML+"...他说"+message
29             }
30         }
31         function sendmsg() {
32             // 获取接收者
33             var receive = document.getElementById("receive").value
34             //获取发送的内容
35             var content = document.getElementById("content").value
36             //以JSON的方式发送到服务器
37             ws.send(‘{"receive":"‘+receive+‘","content":"‘+content+‘"}‘)
38             //获取展示信息的位置
39             var former = document.getElementById("list")
40             former.innerHTML=former.innerHTML+"...你说"+content
41         }
42     </script>
43 </div>
44 </body>