WebSocket_实例

最新推荐文章于 2019-06-18 10:03:00 发布

qq_41665356

最新推荐文章于 2019-06-18 10:03:00 发布

阅读量295

点赞数

分类专栏： websocket

本文链接：https://blog.csdn.net/qq_41665356/article/details/80314772

版权

websocket 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

握手协议的客户端数据已经由浏览器代劳了，服务器端需要我们自己来实现，目前市场上开源的实现也比较多如：

Kaazing WebSocket Gateway(一个 Java 实现的 WebSocket Server)；

mod_pywebsocket(一个 Python 实现的 WebSocket Server)；

Netty(一个 Java 实现的网络框架其中包括了对 WebSocket 的支持)；

node.js(一个 Server 端的 JavaScript 框架提供了对 WebSocket 的支持)；

WebSocket4Net(一个.net的服务器端实现)；

实现一个服务器：

创建一个springMVC项目：websocket

导入jar包：

创建两个包：com.gary.server/com.glodon.controller，并添加springMVC配置，确保启动时扫包：

<context:component-scan base-package="com.glodon.controller"></context:component-scan>

<context:component-scan base-package="com.gary.server"></context:component-scan>

1. 后台

在com.gary.server创建一个类：WebSocketTest

给类添加一个注解@ServerEndpoint，使其成为WebSocket服务器的端点。

package com.gary.server;

import java.io.IOException;

import java.util.concurrent.CopyOnWriteArraySet;

import javax.websocket.OnClose;

import javax.websocket.OnError;

import javax.websocket.OnMessage;

import javax.websocket.OnOpen;

import javax.websocket.Session;

import javax.websocket.server.ServerEndpoint;

/**

* @ServerEndpoint 可以将一个普通Java对象（POJO）作为WebSocket服务器的端点。

* 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端

@ServerEndpoint(value="/webchart")

public class WebSocketTest {

//静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。

private static int onlineCount = 0;

//concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识

private static CopyOnWriteArraySet<WebSocketTest> webSocketSet = new CopyOnWriteArraySet<WebSocketTest>();

//与某个客户端的连接会话，需要通过它来给客户端发送数据

private Session session;

public WebSocketTest() {

System.out.println("-------------WebSocketTest--------------------");

}

/**

* 连接建立成功调用的方法

* @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据

@OnOpen

public void onOpen(Session session){

this.session = session;

webSocketSet.add(this); //加入set中

addOnlineCount(); //在线数加1

onMessage("ID"+session.getId()+"上线！", null);

System.out.println("有新连接加入！ID"+session.getId()+"，当前在线人数为：" + getOnlineCount());

}

/**

* 连接关闭调用的方法

@OnClose

public void onClose(){

webSocketSet.remove(this); //从set中删除

subOnlineCount(); //在线数减1

System.out.println("ID"+session.getId()+"主动关闭连接，当前在线人数为：" + getOnlineCount());

onMessage("ID"+session.getId()+"下线！", null);

}

/**

* 收到客户端消息后调用的方法

* @param message 客户端发送过来的消息

* @param session 可选的参数

@OnMessage

public void onMessage(String message, Session session) {

if (session != null){

String messageSourceId = session.getId();

System.out.println("收到来自客户端ID"+messageSourceId+"的消息:" + message);

message = "ID" + messageSourceId + "说：" + message;

}

//群发消息

for(WebSocketTest item: webSocketSet){

try {

item.sendMessage(message);

} catch (IOException e) {

e.printStackTrace();

continue;

}

/**

* 发生错误时调用

* @param session

* @param error

@OnError

public void onError(Session session, Throwable error){

System.out.println("ID"+session.getId()+"发生错误");

error.printStackTrace();

}

public void sendMessage(String message) throws IOException{

System.out.println("服务器向ID"+session.getId()+"发送消息:"+message);

this.session.getBasicRemote().sendText(message);

}

public static synchronized int getOnlineCount() {

return onlineCount;

}

public static synchronized void addOnlineCount() {

WebSocketTest.onlineCount++;

}

public static synchronized void subOnlineCount() {

WebSocketTest.onlineCount--;

}

2. 前端

先添加一个controller：

@Controller

public class clientController {

@RequestMapping("/client")

public String client(){

System.out.println("client");

return "client";

}

再写一个client.jsp

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Java后端WebSocket的Tomcat实现</title>

</head>

<body>

Welcome

<br />

<hr />

<button onclick="closeWebSocket()">关闭WebSocket连接</button>

<hr />

</body>

var websocket = null;

var url = 'ws://127.0.0.1:8080/websocket/webchart';

//判断当前浏览器是否支持WebSocket

if ('WebSocket' in window) {

websocket = new WebSocket(url);

} else {

alert('当前浏览器 Not support websocket')

}

//连接发生错误的回调方法

websocket.onerror = function() {

setMessageInnerHTML("WebSocket连接发生错误");

};

//连接成功建立的回调方法

websocket.onopen = function() {

setMessageInnerHTML("WebSocket连接成功");

}

//接收到消息的回调方法

websocket.onmessage = function(event) {

setMessageInnerHTML(event.data);

}

//连接关闭的回调方法

websocket.onclose = function() {

setMessageInnerHTML("WebSocket连接关闭");

}

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。

window.onbeforeunload = function() {

closeWebSocket();

}

//将消息显示在网页上

function setMessageInnerHTML(innerHTML) {

document.getElementById('message').innerHTML += innerHTML + '<br/>';

}

//关闭WebSocket连接

function closeWebSocket() {

websocket.close();

}

//发送消息

function send() {

var message = document.getElementById('text').value;

websocket.send(message);

}

</script>

</html>

readyState表示连接有四种状态：

CONNECTING (0)：表示还没建立连接；

OPEN (1)：已经建立连接，可以进行通讯；

CLOSING (2)：通过关闭握手，正在关闭连接；

CLOSED (3)：连接已经关闭或无法打开；

url是代表 WebSocket 服务器的网络地址，协议通常是”ws”或“wss(加密通信)”,send 方法就是发送数据到服务器端；如：

var url = 'ws://127.0.0.1:8080/websocket/webchart';

其中websocket是项目名，webchart'是@ServerEndpoint注解对应的值。

close 方法就是关闭连接；

onopen连接建立，即握手成功触发的事件；

onmessage收到服务器消息时触发的事件；

onerror异常触发的事件；

onclose关闭连接触发的事件；

3. 测试

使用两个浏览器分别访问：http://localhost:8080/websocket/client

然后就可以直接通讯了：

同时，后台也记录了所有信息：

qq_41665356

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录