文档章节

学习WebSocket(一) — HelloWorld

XuePeng77
 XuePeng77
发布于 2016/11/09 18:54
字数 385
阅读 1191
收藏 58

1.引入jar包

    服务器使用的是Tomcat7,它自带了websocket-api.jar,所以在pom.xml中的javax.websocket-api使用了scope=provided,方便调试。

<dependencies>
		<!-- servlet -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
			<version>3.0.1</version>
		</dependency>

		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>
		
		<!-- https://mvnrepository.com/artifact/javax/javaee-api -->
		<dependency>
			<groupId>javax</groupId>
			<artifactId>javaee-api</artifactId>
			<version>7.0</version>
		</dependency>
		
		<!-- https://mvnrepository.com/artifact/javax.websocket/javax.websocket-api -->
		<dependency>
			<groupId>javax.websocket</groupId>
			<artifactId>javax.websocket-api</artifactId>
			<version>1.0</version>
			<scope>provided</scope>
		</dependency>

	</dependencies>

2.编写服务端代码

package cn.net.bysoft.websocketapp.lesson1;

import javax.websocket.OnMessage;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/echo")
public class EchoServer {
	
	@OnMessage
	public String echo(String incomingMessage) {
		return "I got this (" + incomingMessage + ") so I am sending it back !";
	}
}

 

    服务端代码是简单的POJO,加入了两个注解,@ServerEndpoint声明了Socket端点,@OnMessage声明了消息处理函数。

3.编写客户端代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Socket JavaScript Echo Client</title>
</head>
<body>
	<h1>Echo Server</h1>

	<div style="text-align: left;">
		<form action="">
			<input onclick="send_echo();" value="Press to send" type="button">
			<input id="textID" name="message" value="Hello Web Sockets"
				type="text"> <br>
		</form>
	</div>

	<div id="output"></div>
</body>

<script>
	var echo_websocket;

	function init() {
		output = document.getElementById("output");
	}

	function send_echo() {
		// 定义websocket的端点地址
		var wsUri = "ws://localhost:8080/websocketapp/echo";
		writeToScreen("Connecting to " + wsUri);
		// 创建websocket对象
		echo_websocket = new WebSocket(wsUri);
		
		// 打开websocket
		echo_websocket.onopen = function(evt) {
			writeToScreen("connected!");
			// 发送文本框中的内容到服务端
			doSend(textID.value);
		}
		
		// 接收到服务端处理的数据
		echo_websocket.onmessage = function(evt) {
			writeToScreen("Received message: " + evt.data);
			// 关闭websocket
			echo_websocket.close();
			writeToScreen("Closed!");
		}

		echo_websocket.onerror = function(evt) {
			writeToScreen("<span style='color: red'>ERROR:</span>" + evt.data);
			echo_websocket.close();
		}
	}

	function doSend(message) {
		echo_websocket.send(message);
		writeToScreen("Sent message:" + message);
	}

	function writeToScreen(message) {
		var pre = document.createElement("p");
		pre.style.wordWrap = "break-word";
		pre.innerHTML = message;
		output.appendChild(pre);
	}

	window.addEventListener("load", init, false);
</script>
</html>

    接下来是客户端是测试代码,点击按钮进行测试。

源码地址:https://github.com/XuePeng87/websocketapp

© 著作权归作者所有

XuePeng77
粉丝 45
博文 145
码字总数 193294
作品 0
丰台
私信 提问
加载中

评论(6)

XuePeng77
XuePeng77
程序员??
面向对象编程??
哈哈哈!没有对象我编毛程!
蛐蛐未加V
蛐蛐未加V

引用来自“monkeyFeng”的评论

引用来自“蛐蛐未加V”的评论

这也能上首页啊?0.0

重要是他在学习,并分享
我单纯是在说技术问题,别扯其他的。
monkeyFeng
monkeyFeng

引用来自“蛐蛐未加V”的评论

这也能上首页啊?0.0

重要是他在学习,并分享
蛐蛐未加V
蛐蛐未加V
这也能上首页啊?0.0
XuePeng77
XuePeng77

引用来自“554330833a”的评论

客户端用什么js连tomcat的websocket

跟浏览器有关,高端版本的浏览器都支持用js脚本new一个WebSocket对象
554330833a
554330833a
客户端用什么js连tomcat的websocket
WebSoket初探并于SpringBoot整合

版权声明:本文版权归Jitwxs所有,欢迎转载,但未经作者同意必须保留原文链接。 https://blog.csdn.net/yuanlaijike/article/details/83002143 一、WebSocket 1.1 HTTP与WebSocket WebSocket...

Jitwxs
2018/10/10
0
0
【译】 WebSocket 协议第十二章——使用其他规范中的WebSocket协议

概述 本文为 WebSocket 协议的第十二章,本文翻译的主要内容为如何使用其他规范中的 WebSocket 协议。 有兴趣了解该文档之前几章内容的同学可以见: 【译】WebSocket 协议——摘要( Abstra...

黄Java
02/19
0
0
八问WebSocket协议:为你快速解答WebSocket热门疑问

本文由“小姐姐养的狗”原创发布于“小姐姐味道”公众号,原题《WebSocket协议 8 问》,收录时有优化和改动。感谢原作者的分享。 一、引言 WebSocket是一种比较新的协议,它是伴随着html5规范...

JackJiang2011
04/25
0
0
WebSocket 协议 RFC 文档(全中文翻译)

概述 经过半年的捣鼓,终于将 WebSocket 协议(RFC6455)全篇翻译完成。现在将所有章节全部整理到一篇文章中,方便大家阅读。如果大家想看具体的翻译文档,可以去我的GitHub中查看。 具体章节...

黄Java
02/19
0
0
实时通信技术之websocket

本文章即从4个方面带大家了解websocket: websocket是什么? 为什么需要 WebSocket ? websocket的优点与缺点? websocket的相关使用(客户端与服务器端)? websocket的相关协议与规范? 一...

一看就喷亏的小猿
2018/11/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
9
0
多线程同时加载缓存实现

import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import java.util.concurrent.ExecutorServi......

暗中观察
昨天
3
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
2
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部