java开发之使用websocket实现web客户端与服务器之间的实时通讯

简介: 使用websocket实现web客户端与服务器之间的实时通讯。以下是个简单的demo。

第一次写博客,有写的不好的地方欢迎大家指点。
使用websocket实现web客户端与服务器之间的实时通讯。以下是个简单的demo。


import java.util.Date;

public class WebSocketMessage {

    /**
     * 发送者ID
     */
    private String senderId;

    /**
     * 接受者ID, 如果为0, 则发送给所有人
     */
    private String receiverId;

    /**
     * 会话内容
     */
    private String messageContent;

    /**
     * 发送时间
     */
    private Date sendTime;

    public String getSenderId() {
        return senderId;
    }

    public void setSenderId(String senderId) {
        this.senderId = senderId;
    }

    public String getReceiverId() {
        return receiverId;
    }

    public void setReceiverId(String receiverId) {
        this.receiverId = receiverId;
    }

    public String getMessageContent() {
        return messageContent;
    }

    public void setMessageContent(String messageContent) {
        this.messageContent = messageContent;
    }

    public Date getSendTime() {
        return sendTime;
    }

    public void setSendTime(Date sendTime) {
        this.sendTime = sendTime;
    }

}

import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping("webSocket")
public class WebSocketController {

    @RequestMapping(value = "messagePage/{userID}")
    public ModelAndView messagePage(@PathVariable String userID, HttpServletResponse response) {
        ModelAndView mav = new ModelAndView();
        mav.addObject("userID", userID);
        mav.setViewName("web_socket");
        return mav;
    }
}

import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;

import com.alibaba.fastjson.JSON;
import com.utime.facade.model.systemplate.WebSocketMessage;

@ServerEndpoint("/webSocketServer/{userID}")
public class WebSocketServer {
    // 连接客户端数量
    private static int onlineCount = 0;
    // 所有的连接客户端
    private static Map<String, WebSocketServer> clients = new ConcurrentHashMap<String, WebSocketServer>();
    // 当前客户端连接的唯一标示
    private Session session;
    // 当前客户端连接的用户ID
    private String userID;

    /**
     * 客户端连接服务端回调函数
     * 
     * @param userID 用户ID
     * @param session 会话
     * @throws IOException
     */
    @OnOpen
    public void onOpen(@PathParam("userID") String userID, Session session) throws IOException {
        this.userID = userID;
        this.session = session;

        addOnlineCount();
        clients.put(userID, this);
        System.out.println("WebSocket日志: 有新连接加入!当前在线人数为" + getOnlineCount());
    }

    @OnClose
    public void onClose() throws IOException {
        clients.remove(userID);
        subOnlineCount();
        System.out.println("WebSocket日志: 有一连接关闭!当前在线人数为" + getOnlineCount());
    }

    /**
     * 接受到来自客户端的消息
     * 
     * @param message
     * @throws IOException
     */
    @OnMessage
    public void onMessage(String message) throws IOException {
        System.out.println("WebSocket日志: 来自客户端的消息:" + message);
        WebSocketMessage webSocketMessage = JSON.parseObject(message, WebSocketMessage.class);

        // 发送消息给所有客户端
        if ("0".equals(webSocketMessage.getReceiverId())) {
            for (WebSocketServer item : clients.values()) {
                item.session.getAsyncRemote().sendText(webSocketMessage.getMessageContent());
                System.out.println("WebSocket日志: ID为"+ webSocketMessage.getSenderId() +"的用户给ID为"+ item.userID +"的客户端发送:" + webSocketMessage.getMessageContent());
            }
        } else {    // 发送消息给指定ID的客户端
            for (WebSocketServer item : clients.values()) {
                if (item.userID.equals(webSocketMessage.getReceiverId())){
                    // 发消息给指定客户端
                    item.session.getAsyncRemote().sendText(webSocketMessage.getMessageContent());
                    System.out.println("WebSocket日志: ID为"+ webSocketMessage.getSenderId() +"的用户给ID为"+ item.userID +"的客户端发送:" + webSocketMessage.getMessageContent());
                    if (!webSocketMessage.getSenderId().equals(webSocketMessage.getReceiverId())) {
                        // 发消息给自己
                        this.session.getAsyncRemote().sendText(webSocketMessage.getMessageContent());
                        System.out.println("WebSocket日志: ID为"+ webSocketMessage.getSenderId() +"的用户给ID为"+ this.userID +"的客户端发送:" + webSocketMessage.getMessageContent());
                    }
                    break;
                }
            }
        }
    }
    
    /**
     * 服务端报错了
     * 
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        System.out.println("WebSocket日志: 发生错误");
        error.printStackTrace();
    }
    
    /**
     * 客户端连接数+1
     */
    public static synchronized void addOnlineCount() {
        WebSocketServer.onlineCount++;
    }
    
    /**
     * 客户端连接数-1
     */
    public static synchronized void subOnlineCount() {
        WebSocketServer.onlineCount--;
    }

    public static synchronized int getOnlineCount() {
        return onlineCount;
    }

    public static synchronized Map<String, WebSocketServer> getClients() {
        return clients;
    }
}
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fun"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<c:set var="baseurl" value="${pageContext.request.contextPath}/"></c:set>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>web_socket</title>

<script type="text/javascript" src="${baseurl}static/js/jquery-2.1.1.js"></script>
<style type="text/css">
    .connector {width: 500px;}
</style>
</head>
<body>
    Welcome
    <br/>
    <input id="text" type="text"/>
    <button onclick="sendToOne(10008)">发消息给个人</button>
    <button onclick="sendToAll(0)">发消息给所有人</button>
    <hr/>
    <button onclick="closeWebSocket()">关闭WebSocket连接</button>
    <hr/>
    <div id="message"></div>
</body>
<script type="text/javascript">
    var websocket = null;
    var host = document.location.host;
    
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        console.info("浏览器支持Websocket");
        websocket = new WebSocket('ws://'+host+'/${baseurl}/webSocketServer/${userID}');
    } else {
        console.info('当前浏览器 Not support websocket');
    }
    
    //连接发生错误的回调方法
    websocket.onerror = function() {
        console.info("WebSocket连接发生错误");
        setMessageInnerHTML("WebSocket连接发生错误"); 
    }
    
    //连接成功建立的回调方法
    websocket.onopen = function() {
        console.info("WebSocket连接成功");
        setMessageInnerHTML("WebSocket连接成功"); 
    } 
    
    //接收到消息的回调方法 
    websocket.onmessage = function(event) {
        console.info("接收到消息的回调方法");
        console.info("这是后台推送的消息:"+event.data);
        setMessageInnerHTML(event.data); 
        console.info("webSocket已关闭!");
    }
    
    //连接关闭的回调方法 
    websocket.onclose = function() {
        setMessageInnerHTML("WebSocket连接关闭");
    }
    
    //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
    window.onbeforeunload = function() {
        closeWebSocket();
    }
    
    //关闭WebSocket连接 
    function closeWebSocket() {
        websocket.close();
    }
    
    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }
    
    //发送消息给其他客户端
    function sendToOne(receiverId) {
        var messageContent = document.getElementById('text').value;
        var message = {};
        message.senderId = "${userID}";
        message.receiverId = receiverId;
        message.messageContent = messageContent;
        websocket.send(JSON.stringify(message));
    }
    
    //发送消息给所有人
    function sendToAll() {
        var messageContent = document.getElementById('text').value;
        var message = {};
        message.senderId = "${userID}";
        message.receiverId = "0";
        message.messageContent = messageContent;
        websocket.send(JSON.stringify(message));
    }
</script>
</html>

写这个的目的只是为了自己做个记录。
写的不好,后面会慢慢完善。

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
相关文章
|
6天前
|
NoSQL Java 关系型数据库
凭借Java开发进阶面试秘籍(核心版)逆流而上
最近参加了面试或者身边有朋友在面试的兄弟有没有发现,现在的面试不仅会问八股文,还会考察框架、项目实战、算法数据结构等等,需要准备的越来越多。 其实面试的时候,并不是要求你所有的知识点都会,而是关键的问题答到点子上!这份《Java 开发进阶面试秘籍(核心版)》由 P8 面试官整体把控,目前已经更新了 30 万字! 资料中涵盖了一线大厂、中小厂面试真题,毕竟真题都是技术领域最经典的基础知识和经验沉淀的汇总,非常有必要学习掌握!双重 buff 叠加,offer 接到手软~ 点击此处取,这可能是你到目前为止领取的最具含金量的一份资料! 整套资料涵盖:Spring、Spring
|
6天前
|
消息中间件 运维 网络协议
客户端和服务器之间的通信
客户端和服务器之间的通信
13 0
|
7天前
计算机网络:思科实验【1-访问WEB服务器】
计算机网络:思科实验【1-访问WEB服务器】
计算机网络:思科实验【1-访问WEB服务器】
|
3天前
|
Java
java上传、下载、预览、删除ftp服务器上的文件
java上传、下载、预览、删除ftp服务器上的文件
|
3天前
|
SQL Oracle Java
java开发常见错误及其解决方式
java开发常见错误及其解决方式
|
3天前
|
移动开发 编解码 网络协议
用Java的BIO和NIO、Netty来实现HTTP服务器(三) 用Netty实现
用Java的BIO和NIO、Netty来实现HTTP服务器(三) 用Netty实现
|
3天前
|
网络协议 Java Linux
用Java来实现BIO和NIO模型的HTTP服务器(二) NIO的实现
用Java来实现BIO和NIO模型的HTTP服务器(二) NIO的实现
|
3天前
|
编解码 网络协议 Java
用Java的BIO和NIO、Netty实现HTTP服务器(一) BIO与绪论
用Java的BIO和NIO、Netty实现HTTP服务器(一) BIO与绪论
|
5天前
|
数据采集 Java 数据库
我想再学一次Java三种循环结构哦---【开发实例】
我想再学一次Java三种循环结构哦---【开发实例】
22 0
我想再学一次Java三种循环结构哦---【开发实例】
|
5天前
|
安全 网络安全 开发者
如何在OpenWRT部署uhttpd搭建服务器实现远程访问本地web站点
如何在OpenWRT部署uhttpd搭建服务器实现远程访问本地web站点
19 0

相关产品

  • 云迁移中心