首页 > > 程序设计 > Java技术 >

websocket简单实现在线聊天

2018-12-09 11:19:34来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

WebSocket简介与消息推送

B/S架构的系统多使用HTTP协议，HTTP协议的特点：

1 无状态协议
2 用于通过 Internet 发送请求消息和响应消息
3 使用端口接收和发送消息，默认为80端口
底层通信还是使用Socket完成。

HTTP协议决定了服务器与客户端之间的连接方式，无法直接实现消息推送（F5已坏）,一些变相的解决办法：

双向通信与消息推送

轮询：客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接。  优点：后端程序编写比较容易。  缺点：请求中有大半是无用，浪费带宽和服务器资源。  实例：适于小型应用。

长轮询：客户端向服务器发送Ajax请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。  优点：在无消息的情况下不会频繁的请求，耗费资小。  缺点：服务器hold连接会消耗资源，返回数据顺序无保证，难于管理维护。 Comet异步的ashx， 实例：WebQQ、Hi网页版、Facebook IM。

长连接：在页面里嵌入一个隐蔵iframe，将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求，服务器端就能源源不断地往客户端输入数据。  优点：消息即时到达，不发无用请求；管理起来也相对便。  缺点：服务器维护一个长连接会增加开销。  实例：Gmail聊天

Flash Socket：在页面中内嵌入一个使用了Socket类的 Flash 程序JavaScript通过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通信，JavaScript在收到服务器端传送的信息后控制页面的显示。  优点：实现真正的即时通信，而不是伪即时。  缺点：客户端必须安装Flash插件；非HTTP协议，无法自动穿越防火墙。  实例：网络互动游戏。

Websocket:
WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信。
特点:
事件驱动
异步
使用ws或者wss协议的客户端socket

能够实现真正意义上的推送功能

缺点：

少部分浏览器不支持，浏览器支持的程度与方式有区别。

 

JavaEE 7中出了JSR-356:Java API for WebSocket规范。不少Web容器，如Tomcat,Nginx,Jetty等都支持WebSocket。

一、下面demo使用jetty实现：

项目结构：

java后台代码：

package edu.nf.ws.server;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Set;

/**
 * @author wangl
 * @date 2018-12-05
 * websocket服务端
 */
@ServerEndpoint("/chat/server/{userName}")
public class ChatServer {

    /**
     * 当有客户端连接到服务端的时候就会调用这个方法
     * session代表客户端和服务端的一个连接会话对象
     * ，由容器负责创建和维护
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("userName") String userName){
        System.out.println("有客户端连接..."+userName);
        //将用户名保存到当前用户会话的属性中（有点类似作用域的概念）
        session.getUserProperties().put("user", userName);
    }

    /**
     * 客户端和服务器之间通信的方法，
     * 服务端每当接收到客户端的消息就会调用这个方法
     * ,注意：必须指定一个String类型的参数，表示接收到客户端的文本消息
     */
    @OnMessage
    public void onMessage(String message, Session session) throws IOException{
        System.out.println("接收消息..." + message);
        //将消息发送给所有人
        sendAllUser(message, session);
    }

    /**
     * 当客户端关闭或者断开连接时，服务端会调用此方法
     * @param session
     */
    @OnClose
    public void opnClose(Session session) throws IOException{
        System.out.println("客户端失去连接...");
        //关闭会话
        session.close();
    }

    private void sendAllUser(String message, Session session) throws IOException{
        //获取所有人的会话对象
        Set<Session> users = session.getOpenSessions();
        //获取发送人
        String sendUser = session.getUserProperties().get("user").toString();
        //发送给所有人
        for (Session user : users) {
            user.getBasicRemote().sendText(sendUser + " : " + message);
        }
    }
}
View Code

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="loginDiv">
    用户名:<input type="text" id="userName" name="userName"/>
    <input type="button" id="login" value="login"/>
    </div>

    <div id="container" style="display: none">
        <div id="content"></div>
        <input type="text" name="msg" id="msg"/>
        <input type="button" id="send" value="send"/>
    </div>

<script src="js/jquery-3.3.1.min.js"></script>
<script>
    $(function(){
        var ws;
        //登陆
        $('#login').on('click',function(){
            var userName = $('#userName').val();
            //创建websocket对象并连接服务端
             ws = new WebSocket('ws://localhost:8080/chat/server/' + userName);

            //客户端打开连接时会回调此方法
            /*ws.onopen = function(){
                //...
            }*/

            //客户端关闭或断开连接时执行此方法
            /*ws.onclose = function(){
                //...
            }*/

             //接收服务端发送的消息
             ws.onmessage = function(message){
                $('#content').append(message.data + "<br>");
             }
             $('#loginDiv').css('display','none');
             $('#container').css('display','block');
        });
        //发送消息
        $('#send').on('click',function(){
            var msg = $('#msg').val();
            //发送消息
            ws.send(msg);
        });
    })
</script>
</body>
</html>
View Code

 

 

 

 二、spring+jetty实现

 项目结构：

 

pom 配置：

<?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>edu.nf</groupId>
    <artifactId>spring-ws</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <java.version>1.8</java.version>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
        <maven.compiler.compilerVersion>1.8</maven.compiler.compilerVersion>
        <!-- spring版本 -->
        <spring.version>5.1.1.RELEASE</spring.version>
        <servlet.version>4.0.1</servlet.version>
        <jackson.version>2.9.7</jackson.version>
    </properties>

    <!-- 添加依赖 -->
    <dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>${servlet.version}</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-websocket</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>${jackson.version}</version>
        </dependency>
    </dependencies>

    <!-- war插件 -->
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>2.2</version>
                <configuration>
                    <warSourceDirectory>web</warSourceDirectory>
                    <!-- 指定web.xml路径 -->
                    <webXml>web\WEB-INF\web.xml</webXml>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>
View Code

web.xml配置：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    
    <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:dispatcher-servlet.xml</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    
</web-app>
View Code

ServerEndpointHandler（服务端）

package edu.nf.demo.websocket;

import edu.nf.demo.entity.Users;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

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

/**
 * @author wangl
 * @date 2018-12-06
 * websocket服务端
 */
public class ServerEndpointHandler extends TextWebSocketHandler {

    /**
     * 维护一个用户列表(key存放用户名，value存放每一个用户的WebSocketSession)
     */
    private static Map<String, WebSocketSession> users = new ConcurrentHashMap<>();

    /**
     * 客户端建立连接之后执行此方法(onOpen)
     * @param session 每当客户端连接后，容器会为其创建一个Session对象，
     *                这个对象在Spring中就是WebSocketSession
     * @throws Exception
     */
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("客户端建立了连接...");
        //获取用户名,getAttributes方法得到的是一个Map，
        //这个map里面存放了握手拦截器将HttpSession作用域拷贝过去的数据
        Users user = (Users)session.getAttributes().get("user");
        //将用户的session保存到用户列表中
        users.put(user.getUserName(), session);
    }

    /**
     * 每当客户端发送消息时执行此方法（onmessage）
     * @param session
     * @param message TextMessage对象表示接收客户端的文本消息对象,
     *                它的getPayload方法将获取具体消息内容
     * @throws Exception
     */
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        System.out.println("接收客户端消息..." + message.getPayload());
        //获取用户名
        Users sendUser = (Users)session.getAttributes().get("user");
        //群发消息
        for(String userName : users.keySet()){
            //重新构建一个TextMessage对象
            TextMessage newMessage = new TextMessage(sendUser.getUserName() + " : " + message.getPayload());
            //发送所有人
            users.get(userName).sendMessage(newMessage);
        }
    }

    /**
     * 哭护短关闭或断开连接时执行此方法（onclose）
     * @param session
     * @param status
     * @throws Exception
     */
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        System.out.println("客户端断开连接...");
        session.close();
    }
}
View Code

UserController（请求控制类）

package edu.nf.demo.controller;

import edu.nf.demo.controller.vo.ResponseVO;
import edu.nf.demo.entity.Users;
import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpSession;

/**
 * @author wangl
 * @date 2018-12-06
 */
@RestController
public class UserController {

    @PostMapping("/userLogin")
    public ResponseVO login(Users user, HttpSession session){
        //执行用户验证
        //代码省略.......
        //验证成功后将用户放入会话作用域
        session.setAttribute("user", user);
        ResponseVO vo = new ResponseVO();
        vo.setCode(HttpStatus.OK.value());
        vo.setData("index.html");
        return vo;
    }
}
View Code

index.html(登录成功的聊天网页)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
  <div id="content"></div>
  <input type="text" id="msg" name="msg"/>
  <input type="button" value="send"/>
<script>
    $(function () {
       var ws = new WebSocket('ws://localhost:8080/websocket');
       ws.onmessage = function (event) {
           $('#content').append(event.data + '<br>');
       }
       $(':button').on('click',function () {
           var msg = $('#msg').val();
           ws.send(msg);
       });

    })
</script>
</body>
</html>
View Code

运行结果：

 

 原理参照博客：https://www.cnblogs.com/best/p/5695570.html

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：List排序Collections.sort 重写compare

下一篇：撩课-Java每天5道面试题第17天

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签