java写了一个简单的聊天功能

我只是上传一下代码,做一下代码笔记。


我看了那位博主的博客后,我大概觉得有以下思路:

  • 首先是导入依赖,用了HTML5的一个 websocket 功能:
<dependency>
	<groupId>org.springframework.bootgroupId>
    <artifactId>spring-boot-starter-websocketartifactId>
dependency>
  • 接着是添加配制 WebSocketConfig.java
package com.example.java.webstock.demo.configWeb;

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();
    }
}

  • 然后是服务端的Controller层:

  • 先是做一个简单的测试类
package com.example.java.webstock.demo.configServer;

import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
/*
* websocket其实很简单,前后端各写4个事件方法就行了(当然你也可以省略一些方法)
1.建立连接
2.收到消息
3.传输消息失败
4.关闭连接
* */
@Component
@ServerEndpoint("/websocket/{sid}")
public class WebSocketServerController {
//    收到消息调用方法
    @OnMessage
    public void onMessage(Session session, String message){
//        System.out.println("收到的消息为:"+message);
        try {
//       如果事件想和具体会话关联,方法上只要加Session参数就行(4种事件类型的方法上都可加)
//       举个例子,直接将用户发送给服务端的话再返回给客户端
            session.getBasicRemote().sendText(message);
        }catch (IOException e){
            e.printStackTrace();
        }
    }
//    建立连接调用方法
//    传递参数
//    方法上加@PathParam参数即可
    @OnOpen
    public void onOpen(@PathParam("sid") String sid){
        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");
    }
}

  • 这是前端代码 index.html

<html>
<head>
    <meta charset="UTF-8">
    <title>Testing websocketstitle>
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/2020');

    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
            += '
'
+ 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>
  • 这是测试结果:
    java写了一个简单的聊天功能_第1张图片

  • 然后这是实现多人在线聊天的功能
  • GroupChatController.java
package com.example.java.webstock.demo.configServer;

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.ConcurrentHashMap;

@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");
    }

}

  • 在这里遇到了一个坑点,那位博主的slf4j导入在pom.xml的时候用不了,我就去了setting里面导入了lombok才得以解决。这是一个日志。
  • 然后就是index.html

<html>
<head>
    <meta charset="UTF-8">
    <title>Testing websocketstitle>
head>
<body>
<div>
    <input type="text" id="sid" placeholder="请输入房间"/><br>
    <input type="text" id="nickname" placeholder="请输入昵称"/><br>
    <input type="submit" value="连接" onclick="connect()" /><br>
    <textarea rows="3" cols="20" id="content">textarea><br>
    <input type="submit" value="发送" onclick="start()" />
    <br>
div>
<div id="messages">div>
<script type="text/javascript">

    var webSocket = null;

    function onMessage(event) {
        document.getElementById('messages').innerHTML
            += '
'
+ event.data; } function onOpen(event) { document.getElementById('messages').innerHTML = 'Connection established'; } function onError(event) { alert("发生错误"); } function onClose(event) { alert("连接关闭"); } function connect() { var sid = document.getElementById('sid').value; var nickname = document.getElementById('nickname').value; if (url == '' || nickname == '') { alert("房间号和用户名不能为空"); return; } var serverHot = window.location.host; // var url = 'ws://' + serverHot + '/groupChat/' + sid + '/' + nickname; var url = 'ws://localhost:8081/groupChat/' + sid + '/' + nickname; webSocket = new WebSocket(url); 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 start() { var text = document.getElementById('content').value; webSocket.send(text); document.getElementById('content').value = ''; }
script> body> html>
  • 这是测试结果
    java写了一个简单的聊天功能_第2张图片

写在最后,这些代码我基本上是原封不动的搬来写的,体验到了这个乐趣,自己也学到了点东西。如果想看更加详细请点击这里前往原地址进行学习!我只是做了个笔记。

你可能感兴趣的:(Java学习)