动机是要了解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'
}
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" οnclick="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端跑起来，我后来有打开一个网页，这样就有了三个客户端。运行效果如下：
有这个框架，基本上可以实现网络聊天系统的主要逻辑了。具体细化的功能当然还是需要花很多功夫的。
扫一扫
976
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
