如何花20分钟,给女朋友们写一个web版群聊程序? ——再也不用担心打游戏时的夺命连环call啦-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

如何花20分钟,给女朋友们写一个web版群聊程序? ——再也不用担心打游戏时的夺命连环call啦

2020-01-13 15:51:54 862 1

WebSocket详解

image.png

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。可以说WebSocket的出现,使得浏览器具备了实时双向通信的能力

在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

原来为了实现推送,很多公司用的是Ajax 轮询,即按照特定的时间间隔,由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。而websocket就可以解决这些问题。

在Spring Boot中使用WebSocket

1.pom文件增加依赖

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

2.增加配置

@Configuration
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

3.Java代码

@Component
@ServerEndpoint("/websocket")
public class WebSocketServerController {

    // 收到消息调用的方法
    @OnMessage
    public void onMessage(String message) {
        System.out.println("收到的消息为 " + message);
    }

    // 建立连接调用的方法
    @OnOpen
    public void onOpen() {
        System.out.println("Client connected");
    }

    // 关闭连接调用的方法
    @OnClose
    public void onClose() {
        System.out.println("Connection closed");
    }

    // 传输消息错误调用的方法
    @OnError
    public void OnError(Throwable error) {
        System.out.println("Connection error");
    }
}

4.前端代码

<!DOCTYPE html>
<html>
<head>
<title>Testing websockets</title>
</head>
<body>
  <div>
	<textarea rows="3" cols="20" id="content"></textarea>
	<br>
    <input type="submit" value="Start" onclick="start()" />
  </div>
  <div id="messages"></div>
  <script type="text/javascript">
    var webSocket = 
      new WebSocket('ws://localhost:8080/websocket');

    webSocket.onerror = function(event) {
      onError(event)
    };

    webSocket.onopen = function(event) {
      onOpen(event)
    };

    webSocket.onmessage = function(event) {
      onMessage(event)
    };
	
	webSocket.onclose = function(event) {
      onClose(event)
    };
	

    function onMessage(event) {
      document.getElementById('messages').innerHTML 
        += '<br />' + event.data;
    }

    function onOpen(event) {
      document.getElementById('messages').innerHTML 
        = 'Connection established';
    }

    function onError(event) {
      alert(event);
    }
	
	function onClose(event) {
      alert(event);
    }

    function start() {
	  var text = document.getElementById('content').value;
      webSocket.send(text);
    }
  </script>
</body>
</html>

所以你看websocket其实很简单,前后端各写4个事件方法就行了(当然你也可以省略一些方法)

1.建立连接 2.收到消息 3.传输消息失败 4.关闭连接

事件和具体会话关联

如果事件想和具体会话关联,方法上只要加Session参数就行(4种事件类型的方法上都可加)

举个例子,直接将用户发送给服务端的话再返回给客户端

// 收到消息调用的方法
@OnMessage
public void onMessage(Session session, String message) {
	try {
		session.getBasicRemote().sendText(message);
	} catch (IOException e) {
		e.printStackTrace();
	}
}

image.png

传递参数

方法上加@PathParam参数即可

@Component
@ServerEndpoint("/websocket/{sid}")
public class WebSocketServerController
1
2
3
@OnOpen
public void onOpen(@PathParam("sid") String sid) {
	System.out.println("Client connected");
}

实现一个在线群聊

后端接口

@Slf4j
@Component
@ServerEndpoint("/groupChat/{sid}/{username}")
public class GroupChatController {

    // 保存 组id->组成员 的映射关系
    private static ConcurrentHashMap<String, List<Session>> groupMemberInfoMap = new ConcurrentHashMap<>();

    // 收到消息调用的方法,群成员发送消息
    @OnMessage
    public void onMessage(@PathParam("sid") String sid,
                          @PathParam("username") String username, String message) {
        List<Session> sessionList = groupMemberInfoMap.get(sid);
        // 先一个群组内的成员发送消息
        sessionList.forEach(item -> {
            try {
                String text = username + ": " + message;
                item.getBasicRemote().sendText(text);
            } catch (IOException e) {
                e.printStackTrace();
            }
        });
    }

    // 建立连接调用的方法,群成员加入
    @OnOpen
    public void onOpen(Session session, @PathParam("sid") String sid) {
        List<Session> sessionList = groupMemberInfoMap.get(sid);
        if (sessionList == null) {
            sessionList = new ArrayList<>();
            groupMemberInfoMap.put(sid,sessionList);
        }
        sessionList.add(session);
        log.info("Connection connected");
        log.info("sid: {}, sessionList size: {}", sid, sessionList.size());
    }

    // 关闭连接调用的方法,群成员退出
    @OnClose
    public void onClose(Session session, @PathParam("sid") String sid) {
        List<Session> sessionList = groupMemberInfoMap.get(sid);
        sessionList.remove(session);
        log.info("Connection closed");
        log.info("sid: {}, sessionList size: {}", sid, sessionList.size());
    }

    // 传输消息错误调用的方法
    @OnError
    public void OnError(Throwable error) {
        log.info("Connection error");
    }
}

前端代码很简单,点击github

下面来看效果

image.png

注意先连接,后发送

image.png

加入阿里云钉钉群享福利:每周技术直播,定期群内有奖活动、大咖问答

409449315718661054.jpg

原文链接

取消 提交回答
全部回答(1)
  • jacky黄
    2020-03-25 16:28:55

    哇哦,好东西!

    0 0
相关问答

40

回答

[@徐雷frank][¥20]什么是JAVA的平台无关性

大河人家 2018-10-29 23:55:20 144699浏览量 回答数 40

162

回答

惊喜翻倍:免费ECS+免费环境配置~!(ECS免费体验6个月活动3月31日结束)

豆妹 2014-10-29 17:52:21 226095浏览量 回答数 162

8

回答

OceanBase 使用动画(持续更新)

mq4096 2019-02-20 17:16:36 336978浏览量 回答数 8

110

回答

OSS存储服务-客户端工具

newegg11 2012-05-17 15:37:18 295480浏览量 回答数 110

22

回答

爬虫数据管理【问答合集】

我是管理员 2018-08-10 16:37:41 147218浏览量 回答数 22

18

回答

阿里云开放端口权限

xcxx 2016-07-20 15:03:33 646738浏览量 回答数 18

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 146030浏览量 回答数 31

38

回答

安全组详解,新手必看教程

我的中国 2017-11-30 15:23:46 259805浏览量 回答数 38

82

回答

OSS入门教程

belle.zhoux 2014-07-07 17:14:27 151415浏览量 回答数 82

249

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 305595浏览量 回答数 249
+关注
钉群小二
不定期更新钉群圈子活动等内容
33
文章
225
问答
问答排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载