欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

使用WebSocket设计简单聊天软件的雏形

程序员文章站 2022-05-20 10:09:43
...

动机是要了解WebSocket，网购没有书籍，网上的资料也比较碎片化，接触这个有好几天了，没找到一个深入的有效途径。有朋友给我一个例程，但是由于搞不定Idea，所以也没有跑起来。网上很多例子，讲解都不完整，不是注释不齐，就是没交代环境配置。今天花了半天时间，把一个简单的IM系统的雏形弄出来。立即写一个博客，一方面有利于自己记忆，一方面也许能为其他和我一样的初学者指一条路。

这个系统分三部分，服务器端、手机终端和网页终端，本来还应该有桌面端，可惜我的C#还拿不出手，也顾不上，所以就暂时以这三部分进行整合。我的原则是精简，用最少的代码实现功能，还要能看清楚程序的脉络。

当然灵感和理解也来自于网上一些代码，不过等我弄明白，已经找不到出处了。

一、服务器用MyEclipse写的，我不是开发java的，没有配置专用的java开发环境，这个软件是比较早的，使用方便。我的jdk是1.8，服务器是tomcat。


创建一个web项目，添加一个类就行了，把它部署到tomcat。

/**
 * 聊天服务器程序
 * 
 * @author Devin Chen
 *
 */
@ServerEndpoint("/chatserver")
public class ChatServer {

	private static final AtomicInteger connectionIds = new AtomicInteger(0);
	private static final Set<ChatServer> connections = new CopyOnWriteArraySet<>();

	private final String userName;
	private Session session;

	public ChatServer() {
		userName = "用户" + connectionIds.getAndIncrement();
	}

	/**
	 * 连接成功
	 * 
	 * @param session
	 */
	@OnOpen
	public void onOpen(Session session) {
		//连接成功，就获得一个会话
		this.session = session;
		connections.add(this);
		handMessage(userName + "已连接");
	}

	/**
	 * 连接关闭
	 */
	@OnClose
	public void onClose() {
		//一个连接退出退出就从队列中删除
		connections.remove(this);
		handMessage(userName + "已断开连接");
	}

	/**
	 * 收到消息
	 * 
	 * @param message
	 */
	@OnMessage
	public void onMessage(String message) {
		//message就是收到的消息，可以*处理，也可以当作json一样解析，只要有相关协议
		handMessage(userName + "--->" + message);
	}

	/**
	 * 连接错误
	 * 
	 * @param t
	 * @throws Throwable
	 */
	@OnError
	public void onError(Throwable t) throws Throwable {
		//可以打印出错信息，或做其他处理
	}

	/**
	 * 消息处理
	 * 
	 * @param msg
	 */
	private static void handMessage(String msg) {
		for (ChatServer client : connections) {
			try {
				synchronized (client) {
					client.session.getBasicRemote().sendText(msg);
				}
			} catch (IOException e) {
				System.out.println("error:消息发送失败");
				connections.remove(client);
				try {
					client.session.close();
				} catch (IOException e1) {
				}
				handMessage(client.userName + "已经断开链接。");
			}
		}
		System.out.println(msg);
	}
}

上面有必要的注释，看懂应该没问题，一共四个方法，包括类都是用注解的。类似于回调，处理连接成功、错误、收到消息和连接断开四种状态。

二、Android端我使用的是一个封装好的开源库

1.首先，创建好项目；

2.在project的build.gradle中加入

repositories {
  // ...
  maven { url "https://jitpack.io" }
}

2.添加依赖，同步 

dependencies {
  compile 'org.java-websocket:java-websocket:1.3.2'
}


4.创建一个类继承WebSocketClient。 


public class ChatClient extends WebSocketClient {
    private OnHandMessage onHandMessage;

    public ChatClient(URI uri) {
        super(uri);
    }

    @Override
    public void onOpen(ServerHandshake serverHandshake) {

    }

    @Override
    public void onMessage(String s) {
        //通知UI更新，就加这么一句
        if (onHandMessage != null) {
            onHandMessage.onHandMessage(s);
        }
    }

    @Override
    public void onClose(int i, String s, boolean b) {

    }

    @Override
    public void onError(Exception e) {

    }

    public void setOnHandMessage(OnHandMessage onHandMessage) {
        this.onHandMessage = onHandMessage;
    }

    /**
     * 收到消息的回调接口
     */
    public interface OnHandMessage {
        void onHandMessage(String message);
    }
}

这个类四个主要方法和服务器端的四个方法一致，处理四种状态，可以不实现，我这里添加了一个回调接口，用于更新UI，只是处理了获得消息的方法。

5.创建一个线程类

public class SocketThread extends Thread {

    private String url = "ws://192.168.1.102:8080/WebSocketServer/chatserver";

    public boolean isClose;//关闭标记，主要是为发送心跳包判断状态
    private ChatClient mClient;

    public SocketThread(Context context) {
        try {
            mClient = new ChatClient(new URI(url));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @Override
    public void run() {
        connect();//连接服务器
//        //注释是因为不要心跳也可以实现基本功能
//        while (!isClose) {
//            try {
//                //发送心跳包
//                mClient.send("1");
//                SystemClock.sleep(30000);
//            } catch (Exception e) {
//                e.printStackTrace();
//            }
//        }
    }

    /**
     * 连接
     */
    private void connect() {
        try {
            mClient.connectBlocking();
            Logger.d("连接成功");
        } catch (Exception e) {
            Logger.d("连接失败");
            e.printStackTrace();
        }
    }

    /**
     * 断开连接
     */
    public void closeClient() {
        try {
            isClose = true;
            Logger.d("断开连接");
            mClient.closeBlocking();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public ChatClient getClient() {
        return mClient;
    }
}

线程里面主要是连接服务器，所以记得给权限。

6.布局文件很简单，也贴出来

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tv_chat_list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:lines="10" />
    </ScrollView>


    <Button
        android:id="@+id/btn_connection"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="连接服务器" />

    <EditText
        android:id="@+id/et_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="start"
        android:lines="5"
        android:maxLines="5" />

    <Button
        android:id="@+id/btn_send"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="发送" />

</LinearLayout>

7.最后是主类，实现调用逻辑，都有注释 

public class MainActivity extends AppCompatActivity implements View.OnClickListener, ChatClient.OnHandMessage {
    private TextView tvChatList;//聊天记录
    private Button btnConnection, btnSend;//连接、发送按钮
    private EditText etContent;//聊天内容
    private SocketThread socketThread;//websocket线程

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    /**
     * 初始化
     */
    private void initView() {
        tvChatList = (TextView) findViewById(R.id.tv_chat_list);
        btnConnection = (Button) findViewById(R.id.btn_connection);
        etContent = (EditText) findViewById(R.id.et_content);
        btnSend = (Button) findViewById(R.id.btn_send);
        //初始化监听器
        btnConnection.setOnClickListener(this);
        btnSend.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btn_connection:
                //启动连接线程
                socketThread = new SocketThread(this);
                socketThread.getClient().setOnHandMessage(this);
                socketThread.start();
                break;
            case R.id.btn_send:
                //发送消息
                String content = etContent.getText().toString();
                if (!TextUtils.isEmpty(content)) {
                    socketThread.getClient().send(content);
                }
                etContent.setText("");
                break;
            default:
                break;
        }

    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        //关闭连接线程
        socketThread.closeClient();
    }

    @Override
    public void onHandMessage(String message) {
        tvChatList.append(message + "\n");
    }
}


三、网页端主要在于js

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>WebSocket聊天系统网页端</title>
</head>
<body>
<input id="chat_content" type="text">
<button id="send_talk" onclick="send()">发送消息</button>
<div id="chat_list"></div>
</body>

<script type="text/javascript">
    var websocket = null;

    websocket = new WebSocket("ws://192.168.1.102:8080/WebSocketServer/chatserver");

    websocket.onopen = function () {
        document.getElementById("chat_list").innerHTML += "连接成功" + "<br/>";
    }

    websocket.onmessage = function (event) {
        document.getElementById("chat_list").innerHTML += event.data + "<br/>";
    }

    websocket.onerror = function () {
        document.getElementById("chat_list").innerHTML += "连接错误" + "<br/>";
    }

    websocket.onclose = function () {
        document.getElementById("chat_list").innerHTML += "连接关闭" + "<br/>";
    }

    window.onbeforeunload = function () {
        websocket.close();
    }

    function send(){
        websocket.send(document.getElementById("chat_content").value);
    }
</script>
</html>


好了，可以运行了，线运行服务器，再把网页端和Android端跑起来，我后来有打开一个网页，这样就有了三个客户端。运行效果如下：

使用WebSocket设计简单聊天软件的雏形

有这个框架，基本上可以实现网络聊天系统的主要逻辑了。具体细化的功能当然还是需要花很多功夫的。

相关标签： websocket im 聊天系统

上一篇： 获取dom元素那些讨厌的位置封装代码_javascript技巧

下一篇： Java之浅拷贝和深拷贝问题(clone)

推荐阅读