A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 ley 于 2018-1-24 16:37 编辑

导入websocket的包。
通过使用SpringBoot导入包的时候,我们可以发现,很多包都是以 spring-boot-starter 开头的,对于我这种强迫症 ,简直是福音
<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

配置websocket
服务端
首先新建一个WebSocketConfig的类,添加springboot中 @Bean 注解 注入一个bean
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    private final static Logger logger = Logger.getLogger(WebSocketConfig.class);

    public static List<User> onlineUsers = new ArrayList<User>();
    public static List<GameRoom> gameRoomList = new ArrayList<GameRoom>();

    @Autowired
    private SimpMessagingTemplate simpMessagingTemplate;

    @Override
    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {

        stompEndpointRegistry.addEndpoint("/endpointWisely").addInterceptors(new SessionAuthHandshakeInterceptor()).setHandshakeHandler(new DefaultHandshakeHandler() {
            @Override
            protected Principal determineUser(ServerHttpRequest request, WebSocketHandler wsHandler, Map<String, Object> attributes) {
                User user = (User) attributes.get("user");
                //System.out.println("新用户 : "+user.getUserName());
                return new MyPrincipal(user);
            }

        }).withSockJS();

    }


首先编写Controller层,@sentTo是做为客户端订阅发布的点   
@MesseageMapping  是类似springmvc中@RequestMapping的访问地址

@Controller
public class WsController {
    private final static Logger logger = Logger.getLogger(WsController.class);

    private SimpMessagingTemplate messagingTemplate;

    @MessageMapping(value="/welcome")
    @SendTo("/topic/getResponse")
    public WiselyResponse say(WebSocketSession session,WiselyMessage message) throws Exception{
      
        return new WiselyResponse("welcome , "+message.getName()+" !");
    }

    @MessageMapping(value="/getOnlinePlayer")
    @SendTo("/topic/getResponse")
    public ResponseMessage getOnlinePlayer(Principal principal) throws Exception{
        System.out.println(principal);
        ResponseMessage responseMessage = new ResponseMessage();

        JSONObject message = new JSONObject();
        List<User> onlineUsers = WebSocketConfig.onlineUsers;

        JSONArray usersJsonArray = new JSONArray();
        for(User user : onlineUsers){
            usersJsonArray.put(new JSONObject(user));
        }
        message.put("onlineUsers",usersJsonArray);
        responseMessage.setMessage(message.toString());
        responseMessage.setMessageType(ResponseMessage.Type.PAGE_ONLINE_USERLIST.toString());
        responseMessage.setRemark("Is onLine user lists");
        //responseMessage.setUser((User)request.getSession().getAttribute("user"));
        responseMessage.setToUser(null);

        return responseMessage;
    }

    @RequestMapping(value="/login")
    public @ResponseBody String login(HttpServletRequest request, String userName, String password){
        User user = new User();
        user.setId(Long.valueOf(new Date().getTime()).intValue());
        user.setUserName(userName);
        user.setPwd(password);

        HttpSession session  = request.getSession();
        session.setAttribute("user",user);

        JSONObject response = new JSONObject(user);
        return response.toString();
    }


    @MessageMapping(value="/chat")
    @SendTo("/topic/getResponse")
    public ResponseMessage chat(UserSendMessage userSendMessage,Principal principal){

        User user=null;
        List<User> onlineUsers = WebSocketConfig.onlineUsers;
        for(User onLineUser : onlineUsers){
            if(String.valueOf(userSendMessage.getUserId()).equals(String.valueOf(onLineUser.getId()))){
                logger.info("找到用户....");
                user = onLineUser;
            }
        }



        //有人上线 , 构造上线提醒
        ResponseMessage responseMessage = new ResponseMessage();
        responseMessage.setMessage(userSendMessage.getMsg());
        responseMessage.setRemark("user send msg in chatpanel");
        responseMessage.setToUser(null);
        responseMessage.setUser(user);
        responseMessage.setMessageType(ResponseMessage.Type.PAGE_USER_SENDMESSAGE.toString());

        return responseMessage;
    }

    FileOutputStream output;
    public void handleBinaryMessage(WebSocketSession session, BinaryMessage message)
    {
        ByteBuffer buffer= message.getPayload();
        try {
            output.write(buffer.array());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}


然后再页面上定义sockjs访问格式和路径拼装

<script th:src="@{js/jquery.min.js}"></script>
<script th:src="@{js/Helper.js}"></script>
<script th:src="@{js/keyboard.js}"></script>
<script th:src="@{js/const.js}"></script>
<script th:src="@{js/level.js}"></script>
<script th:src="@{js/crackAnimation.js}"></script>
<script th:src="@{js/prop.js}"></script>
<script th:src="@{js/bullet.js}"></script>
<script th:src="@{js/tank.js}"></script>
<script th:src="@{js/num.js}"></script>
<script th:src="@{js/menu.js}"></script>
<script th:src="@{js/map.js}"></script>
<script th:src="@{js/Collision.js}"></script>
<script th:src="@{js/stage.js}"></script>
<script th:src="@{js/main.js}"></script>
function connect(){
    var userName = null;
    while(userName==null || userName==''){
        userName = prompt("请输入你的名字 , 我们将为你注册且登录:");
    }

    $.ajax({
        url:'/login',
        data: {
            'userName':userName,
            'password':'222'
        },
        type:'post',
        dataType:'json',
        success : function (data) {
            userId = data.id;
            if(data.userName !=undefined){
                //stompClient = Stomp.over("/endpointWisely");
                //连接点
                var socket = new SockJS('/endpointWisely');
                stompClient = Stomp.over(socket);

                stompClient.connect({},function (frame) {
                    setConnected(true);
                    console.log("Connected : "+frame);

                    stompClient.subscribe('/topic/getResponse',function (response) {
                        var data = JSON.parse(response.body);
                        var msgType = data.messageType;

                        switch (msgType){
                            case "PAGE_ONLINE_USERLIST":
                                var message = data.message;
                                message =JSON.parse(message);
                                onLineListUpdate(message.onlineUsers);
                                break;
                            case "PAGE_USER_ONLINE_NOTIFY":
                                var message = data.message;
                                message =JSON.parse(message);//要把字符串转为JSON对象
                                var who = message.userName;
                                addMsgBox(who+" 现在上线了","standard");
                                //在线列表用户变化 , 重新更新
                                getOnlineUsers();
                                break;
                            case "PAGE_USER_OFFLINE_NOTIFY":
                                var message = data.message;
                                message =JSON.parse(message);
                                var who = message.userName;
                                addMsgBox(who+" 下线回家了","standard");
                                //在线列表用户变化 , 重新更新
                                getOnlineUsers();
                                break;
                            case "PAGE_USER_SENDMESSAGE":
                                var message = data.message;
                                var who = data.user.userName;
                                var userIdTemp = data.user.id;
                                    //发布订阅都会接受所有消息,过滤自己的消息
                                if(userIdTemp!=userId){
                                    addMsgBox(who+" 说 : "+message,"standard");//自己的话不显示
                                }
                                break;
                            default :
                                break;
                        }
                    });
                });
            }
        }
    });
}

file:///C:\Users\liyu\AppData\Local\Temp\ksohtml\wps2316.tmp.jpg
file:///C:\Users\liyu\AppData\Local\Temp\ksohtml\wps3343.tmp.jpg

file:///C:\Users\liyu\AppData\Local\Temp\ksohtml\wps4843.tmp.jpg








码云地址:https://gitee.com/liyusb/springbootWebscoketShiXianDaiMa.git

图片1.png (15.43 KB, 下载次数: 29)

图片1.png

图片2.png (21.08 KB, 下载次数: 29)

图片2.png

图片3.png (41.3 KB, 下载次数: 10)

图片3.png

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马