WebSocket实践：建立一个Web QQ应用

最新推荐文章于 2023-09-20 19:25:43 发布
最新推荐文章于 2023-09-20 19:25:43 发布
阅读量277 收藏
点赞数
分类专栏： Spring WebSocket 文章标签： WebSocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37771475/article/details/87775613
版权

前言

       WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

相关阅读： 简单易懂理解WebSocket       轮询和长连接的优缺点

1、Web QQ项目结构

2、pom.xml依赖

<?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>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.1.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.scb</groupId>
    <artifactId>websocketdemo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>websocketdemo</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- JSP -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

3、因为使用JSP作为视图，所以在application.yml中进行配置视图解析器

spring:
  mvc:
    view:
      prefix: /WEB-INF/views/
      suffix: .jsp

4、创建WebSocketConfig配置类，配置ServerEndpointExporter为bean，放入Spring IOC容器中。ServerEndpointExporter对象用来定义WebSocket服务器的端点，这样客户端就能请求服务器的端点了。

package com.scb.websocketdemo.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
public class WebSocketConfig {
    //创建服务器端点
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

       有了这个bean，就可以使用@ServerEndpoint 定义一个端点服务类。在这个端点服务类中，还能定义WebSocket的打开、关闭、错误和发送消息的方法，如下所示：

5、定义WebSocket服务端站点

package com.scb.websocketdemo.service;

import org.springframework.stereotype.Service;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

@ServerEndpoint("/ws")
@Service
public class WebSocketServiceImpl {
    // 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount=0;
    // concurrent包的线程安全Set，用来存放每个客户端对应的WebSocketServiceImpl对象。
    // 若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
    private static CopyOnWriteArraySet<WebSocketServiceImpl> webSocketSet=new CopyOnWriteArraySet<>();
    // 与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;

    /**
     * 发送消息
     * @param message　客户端消息
     * @throws IOException
     */
    private void sendMessage(String message) throws IOException{
        this.session.getBasicRemote().sendText(message);
    }

    /**
     *
     * @return　返回在线人数
     */
    private static synchronized int getOnlineCount(){
        return onlineCount;
    }

    /**
     * 当连接人数增加时
     */
    private static synchronized void addOnlineCount(){
        WebSocketServiceImpl.onlineCount++;
    }

    /**
     * 当连接人数减少时
     */
    private static synchronized void subOnlineCount(){
        WebSocketServiceImpl.onlineCount--;
    }

    /**
     * 连接建立成功调用的方法
     * @param session
     */
    @OnOpen
    public void onOpen(Session session){
        this.session=session;
        webSocketSet.add(this);
        addOnlineCount();
        System.out.println("New connection join. Now count is "+getOnlineCount());
        try{
            sendMessage("has new connection join");
        }catch (IOException e){
            System.out.println(e);
        }
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(){
        webSocketSet.remove(this);
        subOnlineCount();
        System.out.println("A connection has closed. Now count is "+getOnlineCount());
    }

    /**
     *　收到客户端消息后调用的方法
     * @param message　客户端发送过来的消息
     * @param session
     */
    @OnMessage
    public void onMessage(String message,Session session){
        System.out.println("Message from client:"+message);

        // 群发消息（首先，服务器接收到客户端的message，然后在这里遍历所有的客户端WebSocketServiceImpl对象，群发消息给他们。）
        for(WebSocketServiceImpl item:webSocketSet){
            try{
                item.sendMessage(message);
            }catch (IOException e){
                e.printStackTrace();
            }
        }
    }

    /**
     *　发生错误时调用
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session,Throwable error){
        System.out.println("Error");
        error.printStackTrace();
    }
}

@ServerEndpoint 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务器端。注解的值将被用于监听用户连接的终端访问URL地址。

onOpen 和 onClose 方法分别被@OnOpen和@OnClose 所注解。这两个注解的作用不言自明：他们定义了当一个新用户连接和断开的时候所调用的方法。

onMessage 方法被@OnMessage所注解。这个注解定义了当服务器接收到客户端发送的消息时所调用的方法。注意：这个方法可能包含一个javax.websocket.Session可选参数（在我们的例子里就是session参数）。如果有这个参数，容器将会把当前发送消息客户端的连接Session注入进去。

@OnError注解是标注客户端请求WebSocket服务端点发生异常时的调用方法。

注意：在onMessage方法中，我们通过轮询对所有的客户端连接都给予发送信息，所以当一个客户端发送消息时，所有的客户端连接都会接收到消息。但是有时候可能只是需要发送给特定的用户，则需要得到用户的信息，可以通过以下方式得到，然后在发送给特定用户。

    /**
     *　收到客户端消息后调用的方法
     * @param message　客户端发送过来的消息
     * @param session
     */
    @OnMessage
    public void onMessage(String message,Session session){
        System.out.println("Message from client:"+message);

        // 群发消息（首先，服务器接收到客户端的message，然后在这里遍历所有的客户端WebSocketServiceImpl对象，群发消息给他们。）
        for(WebSocketServiceImpl item:webSocketSet){
            try{
                /**
                 * 获取当前用户名称
                 */
                String userName=item.session.getUserPrincipal().getName();
                System.out.println("UserName:"+userName);
                item.sendMessage(message);
            }catch (IOException e){
                e.printStackTrace();
            }
        }
    }

6、WebSocket页面开发

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>My WebSocket</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="./../js/websocket.js"></script>
</head>
<body>
    test WebSocket endpoint
    <br />
    <input id="message" type="text" />
    <button onclick="sendMessage()">send message</button>
    <button onclick="closeWebSocket()">close websocket connection</button>
    <div id="context"></div>
</body>
</html>

       这段代码中定义了一个文本框和两个按钮和一个div。其中文本框是给予用户输入消息的，两个按钮一个是发送消息，另一个是关闭WebSocket连接。JavaScript则是引入了JQuery和自定义的一个脚本。代码如下：

var websocket=null;
//　判断当前浏览器是否支持websocket
if ('WebSocket' in window){
    //　创建websocket对象，连接服务器端点
    websocket=new WebSocket("ws://localhost:8080/ws");
} else {
    alert('Not support websocket');
}

//　连接发生错误时的回调方法
websocket.onerror=function () {
    appendMessage("error");
}

//　连接成功建立的回调方法
websocket.onopen=function (event) {
    appendMessage("open");
}

//　接收到消息时的回调方法
websocket.onmessage=function (event) {
    appendMessage(event.data);
}

//　连接关闭时的回调方法
websocket.onclose=function () {
    appendMessage("close");
}

//　监听窗口关闭事件，当窗口关闭时，主动关闭websocket连接
//　防止连接还没断开就关闭窗口，srever端会抛出异常
window.onbeforeunload=function (ev) {
    websocket.close();
}

//　将消息显示在ｉｄ为context的区域内
function appendMessage(message){
    var context=$("#context").append("<br/>"+message);
}

//　关闭连接
function closeWebSocket(){
    websocket.close();
}

//　发送消息
function sendMessage(){
    var message=$("#message").val();
    websocket.send(message);
}

7、WebSocket控制器

package com.scb.websocketdemo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/websocket")
public class WebSocketController {
    //　跳转到websocket界面
    @GetMapping("/index")
    public String websocket(){
        return "websocket";
    }
}

这样，当我们运行项目，访问http://localhost:8080/websocket/index 时，就可以打开WebSocket连接了。

8、结果截图

这里打开两个页面，访问http://localhost:8080/websocket/index

服务端控制台此时截图如下：

当我们在其中一个客户端发送消息时：

此时服务端控制台输出如下：

后记

目前很多浏览器已经实现了WebSocket协议，但是依然存在很多浏览器没有实现该协议，为了兼容那些没有实现该协议的浏览器，往往还需要通过STOMP协议来完成这些兼容，有关STOMP协议的内容在下一章，我们在继续讨论。

 

STOMP实践：点对点和广播通信（系统推送公告和用户聊天功能）

 

 

Gent_倪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用HTML5WebSocket构建实时Web应用
03-04
Web开发人员可以非常方便地使用WebSocket构建实时web应用，开发人员的手中从此又多了一柄神兵利器。本文首先介绍HTML5WebSocket的基本概念以及这个规范试图解决的问题，然后介绍WebSocket的基本原理和编程接口。接...
QQ客户机与服务器间的信息交换分析
萧晓
11-14 232
客户端： 1.客户运行登陆界面  （接收） 服务器图片信息      客户点击登陆   （发送） 用户身份验证信息     （接收） 服务器发来的返回信息        若接收到信息为通过则： 同时……（接收） 服务器发来的用户好友列表（接收） 服务器发来的系统广告信息（接收） 服务器发来的列表好友状态改变信息（接收） 服务器发来的好友聊天信息   …… 同时……（...
java学习笔记-----qq项目----在服务器端实现两个客户端的通信的原理
H002399的专栏
08-17 2408
原理图： 那么服务器端，要完成的工作，应该和交换机的工作原理是一样的。 也就是说，交换机要完成的工作，服务器端也要完成。   那么，我们的服务器端需要： 1.      已连接套接字表 （要能够查询出所有连接到该服务器上的客户端的套接字，同时能够获取相应的套接字） 2.      存储转发。   那
客户端与服务器端交互原理（HTTP数据请求与HTTP响应）
热门推荐
TKOP_的博客
03-11 1万+
回顾有关服务器和客户端的一些概念。了解 HTTP 协议的一些浅层概念，并知道 nodejs 构建服务器的基础知识。
QQ通信原理概述
wangluozhangleilei的专栏
07-20 1367
一、登陆。        不管UDP还是TCP，最终登陆成功之后，QQ都会有一个TCP连接来保持在线状态。这个TCP连接的远程端口一般是80，采用UDP方式登陆的时候，端口是8000。因此，假如你所在的网络开放了80端口（80端口是最常用端口。。就是通常访问Web的端口，禁掉它的话，你的网络对你来说价值已经不大了），但没有屏蔽腾讯的服务器IP，恭喜你，你是可以登陆成功QQ的。 二、聊天消息通
QQ通信原理及QQ是怎么穿透内网进行通信的
thlzjfefe的博客
03-08 1959
QQ是一个基于TCP/UDP协议的通讯软件 发送消息的时候是UDP打洞,登陆的时候使用HTTP~因为登陆服务器其实就是一个HTTP服务器,只不过不是常用的那些,那个服务器是腾讯自行开发的！！！ 一、登录 QQ客户端在局域网内，当你打开QQ登录到QQ服务器时，通过外网，你的客户端与QQ服务器建立了一个长连接。你可以用netstat -bn 看到此连接的状态是 establish 此时，在QQ服务器那面看到的连接的IP是你们局域网对外的IP。举个例子： QQ服务器 IP：121.115....
simple-websocket-server:一个简单的 WebSocket 服务器
05-29
一个简单的 WebSocket 服务器 基于 。 RFC 6455（所有最新浏览器） TLS / SSL开箱即用通过高速公路Websocket测试套件支持 Python 2 和 3安装 pip install simple-websocket-server回声服务器示例 from simple_...
一对一WebSocket聊天：使用Spring Boot和WebSocket建立持久的一对一聊天
02-05
讲解 影片总览
WebSocket技术在实时WEB通讯中的应用研究
01-19
摘要：本文在比较传统的实时web通讯技术与研究HTML5 WebSocket技术基础上，通过研究WebSocket技术在实时WEB通讯中的应用，体现出WebSocket在B/S模式中的应用优势与价值。 　1.前言 　作为下一代的Web标准，HTML5...
简单实现了websocket功能：websocket客户端、winformsocket客户端
10-08
项目本身是win项目，文件夹Web里面是web端实现socket代码的页面，web端可以向多个win端发消息，win收到消息后，告诉web端！
基于Websocket的在线聊天源码
05-29
本人不擅长前端，jsp页面可能不适合所有分辨率，但是核心功能都在后台代码上，希望大家可以弄懂源码，写出性能更强的聊天功能！
仿QQwebsocket聊天室-demo
11-20
可本地运行的，仿QQ界面的websocket聊天室。使用简单，跟着教程即可全面了解项目结构及代码含义
QQ聊天功能Springboot(websocket)的实现
weixin_45776070的博客
05-01 2608
QQ聊天功能Springboot(websocket)的实现 项目展示 服务器端 //刚建立连接时发送0,1 //收到客户消息时发送， 0私聊发送消息(对应服务器,3), 1群聊(对应服务器,4), 2同意好友(对应服务器,0,1) 拒绝好友(无对应服务器) //断开连接时发送2 //0建立连接时加载所有用户,发给自己或对面 { "type": "0", "users": [ { "img": "http://localhost:8080/i
WebSocket实现聊天功能
fwdwqdwq的博客
07-31 1545
登录界面模仿QQ登录操作，支持拖动、最小化和关闭登录后的右侧显示在线用户，右下方显示在线用户的登录日志窗口支持拖动、关闭操作在线用户实现及时聊天功能，可以对指定用户发起聊天（实现点对点的消息推送功能）支持消息的本地缓存，聊天内容不会因为页面的刷新、关闭、退出登录等操作而丢失（消息只是做了简单缓存），清理浏览器缓存数据时消息数据便会丢失。点对点消息推送，实现一对一的即时通信功能。...
微信、QQ这类IM app怎么做——谈谈WebSocket
最新发布
good7ob的博客
09-20 96
WebSocket是一种在单个TCP连接上进行全双工通信的协议。与HTTP协议不同，WebSocket允许服务器主动向客户端推送消息，而不需要客户端显式地向服务器发起请求。WebSocket协议通过建立一次握手，将HTTP协议升级为WebSocket协议，之后就可以在同一个连接上进行实时通信。WebSocket的主要特点包括：全双工通信：WebSocket允许客户端和服务器之间实现全双工通信，双方可以同时发送和接收消息。低延迟。
使用WebSocket模拟WebQQ实现简单的聊天
weixin_43782914的博客
11-30 1247
1.什么是WebSocket？ WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket API 中，浏览器和服务器...
WebSocket - 底层原理、协议、编程式基础架构搭建
CYK_byte的博客
03-06 4353
基于 WebSocket、Spring Boot 下，用一个简易的小 demo 讲解一下“QQ聊天”功能原理~
用WebSocket模拟webQQ实现简单的聊天
qq_43702413的博客
12-03 814
1.使用WebSocket 的好处 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket使得服务器与客户端只需要一次握手就可以实现长久的连接，可以任意的传输多次数据直到自己断开连接，不用像别的协议一样传输完一次数据就断开连接，下次需要数据交互的时候在进行连接。减少了许多不必要的重复操作，提高效率。 2.使用ajax轮询 轮询（Polli...
websocket实现QQ聊天一之一(服务端编写)
化名三爷
11-10 5175
下面介绍一个完整的websocket案例,案例实现socket获取HttpSession，和数据库用户实现绑定 一，后端涉及四个java类 1，websocket消息操作类WebSocketChat.java,先看一下java文件上面的注解 @ServerEndpoint(value ="/webSocketChat.ws",encoders ={ServerEncoder.clas
java中使用WebSocket建立一个连接
03-25
A：在Java中使用WebSocket建立一个连接需要借助WebSocket API。以下是建立WebSocket连接的基本步骤： 1. 导入WebSocket API库：在Java项目中导入WebSocket API库，以便使用WebSocket API提供的函数和方法。 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值