websocket与canvas[转]

server端还是用tomcat7的方式
客户端

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body onload="startServer()">
<canvas id="myCanvas" width="400px" height="500px">myCanvas</canvas>
<canvas id="yourCanvas" width="400px" height="500px">yourCanvas</canvas>
<div id="chatdiv" width="400px" height="500px">chatdiv</div>
<input type="text" id="textMessage" size="20" />
<input type="button" onclick="sendMessage()" value="Send">
<input type="button" onclick="sendphoto()" value="sendphoto">
</body>
<script type="text/javascript">
var myCanvas=document.getElementById("myCanvas");
var context=myCanvas.getContext('2d');
var imagewidth=myCanvas.width;
var imageheight=myCanvas.height;
var yourCanvas=document.getElementById("yourCanvas");
var context2=yourCanvas.getContext('2d');
var image = new Image();
image.src = "haoba.jpg";
image.onload = function(){
context.drawImage(image,0,0);
var imgData=context.getImageData(50,50,200,200);
context2.putImageData(imgData,10,260);
//ctx.putImageData(imgData,200,260,50,50,100,100);
};
var ws = null;
function startServer() {
var url = "ws://192.168.137.27:8081/hao/msg";
if ('WebSocket' in window) {
ws = new WebSocket(url);
} else if ('MozWebSocket' in window) {
ws = new MozWebSocket(url);
} else {
alert('浏览器不支持');
return;
}
ws.binaryType = "arraybuffer";
ws.onopen = function() {
alert('Opened!');
};
// 收到服务器发送的文本消息, event.data表示文本内容
ws.onmessage = function(event) {
if(event.data instanceof ArrayBuffer){
var bytearray = new Uint8Array(event.data);
var tempcanvas = yourCanvas;
tempcanvas.height = imageheight;
tempcanvas.width = imagewidth;
var tempcontext = tempcanvas.getContext('2d');
var imgdata = tempcontext.getImageData(0,0,imagewidth,imageheight);
var imgdatalen = imgdata.data.length;
for(var i=8;i<imgdatalen;i++){
imgdata.data[i] = bytearray[i];
}
tempcontext.putImageData(imgdata,0,0);
var img = document.createElement('img');
img.height = imageheight;
img.width = imagewidth;
img.src = tempcanvas.toDataURL();
var chatdiv=document.getElementById("chatdiv");
chatdiv.appendChild(img);
chatdiv.innerHTML = chatdiv.innerHTML + "<br />";
}else{
alert('Receive message: ' + event.data);
}
};
ws.onclose = function() {
alert('Closed!');
}
ws.onerror = function(err){
alert(err);
};
}
//发送信息
function sendMessage(){
var textMessage=document.getElementById("textMessage").value;
if(ws!=null&&textMessage!=""){
ws.send(textMessage);
}
}
function sendphoto(){
imagedata = context.getImageData(0, 0, imagewidth,imageheight);
var canvaspixelarray = imagedata.data;
var canvaspixellen = canvaspixelarray.length;
var bytearray = new Uint8Array(canvaspixellen);
for (var i=0;i<canvaspixellen;++i) {
bytearray[i] = canvaspixelarray[i];
}
ws.send(bytearray.buffer);
context.fillStyle = '#000000';
context.fillRect(0, 0, imagewidth,imageheight);
}
</script>
</html>

tomcat7下的服务端
HelloWorldWebSocketServlet.java

package com.hao;
import java.io.DataInputStream;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.Socket;
import java.net.UnknownHostException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;
import javax.servlet.http.HttpServletRequest;
import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
import org.apache.catalina.websocket.WsOutbound;
public class HelloWorldWebSocketServlet extends WebSocketServlet {
public static Map<String,MyMessageInbound> mmiList = new HashMap<String,MyMessageInbound>();
protected StreamInbound createWebSocketInbound(String subProtocol,
HttpServletRequest arg1) {
return new MyMessageInbound();
}
public int getUserCount(){
return mmiList.size();
}
private class MyMessageInbound extends MessageInbound {
WsOutbound myoutbound;
String mykey;
@Override
public void onOpen(WsOutbound outbound) {
try {
System.out.println("Open Client.");
this.myoutbound = outbound;
mykey =""+System.currentTimeMillis();;
mmiList.put(mykey, this);
System.out.println("mmiList size:"+mmiList.size());
outbound.writeTextMessage(CharBuffer.wrap("open "+mykey));
} catch (IOException e) {
e.printStackTrace();
}
}
@Override
public void onClose(int status) {
System.out.println("Close Client.");
//mmiList.remove(this);
mmiList.remove(mykey);
}
@Override
protected void onBinaryMessage(ByteBuffer arg0) throws IOException {
System.out.println("websocket-----onBinaryMessage:"+arg0.toString());
for (Map.Entry<String, MyMessageInbound> entry : mmiList.entrySet()) {
System.out.println(entry.getKey()+"--bin---");
MyMessageInbound mmib = (MyMessageInbound) entry.getValue();
mmib.myoutbound.writeBinaryMessage(arg0);
mmib.myoutbound.flush();
}
}
@Override
protected void onTextMessage(CharBuffer message) throws IOException {
System.out.println("onText--->" + message.toString());
String[] msgarray= message.toString().split(",");
for (Map.Entry<String, MyMessageInbound> entry : mmiList.entrySet()) {
System.out.println(entry.getKey()+"-----");
MyMessageInbound mmib = (MyMessageInbound) entry.getValue();
CharBuffer buffer = CharBuffer.wrap(message);
System.out.println(buffer);
mmib.myoutbound.writeTextMessage(buffer);
mmib.myoutbound.flush();
}
}
}
}

tomcat的配置文件：

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
<a href="http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"" target="_blank">http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"</a> version="3.0"
metadata-complete="true">
<servlet>
<servlet-name>haomsg</servlet-name>
<servlet-class>com.hao.HelloWorldWebSocketServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>haomsg</servlet-name>
<url-pattern>/hao/msg</url-pattern>
</servlet-mapping>
</web-app>

websocket与canvas[转]的更多相关文章

Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏
Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏转载来源:jrainlau 链接:https://segmentfault.com/a/1190000005804860 项 ...
Swoole WebSocket 的应用
目录概述代码小结概述这是关于 Swoole 学习的第三篇文章:Swoole WebSocket 的应用. 第二篇:Swoole Task 的应用第一篇:Swoole Timer 的应用什 ...
html5高级
Html5高级项目回顾 Day 01 第三阶段知识体系: (1)AJAX异步请求数据库.PHP.HTTP.原生AJAX.jQuery中的AJAX (2)HTML5高级特性九大新特性 (3)Boo ...
(视频) 基于HTML5的服务器远程访问工具
现在云计算这么发达,基本上每个人都多少有几台Windows或者Linux服务器运行在云端,要直接进入这些服务器进行配置就需要使用类似远程桌面或者Putty这类的工具,虽然大多数Windows电脑都自带 ...
node相关--代码共享
代码共享问题: 是否值得在两个环境中运行同一份代码: //看项目依赖的API是否在两个环境中都有或有替代: 浏览器提供的标准API:XMLHttpRequest.WebSocket.DOM.canv ...
使用jQuery AJAX读取二进制数据
READING BINARY DATA USING JQUERY AJAX http://www.henryalgus.com/reading-binary-files-using-jquery-aj ...
绝版珍珍藏：web前端技术学习指南
绝版珍珍藏:web前端技术学习指南优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...
Canvas + WebSocket + Redis 实现一个视频弹幕
原文出自:https://www.pandashen.com 页面布局首先,我们需要实现页面布局,在根目录创建 index.html 布局中我们需要有一个 video 多媒体标签引入我们的本地视频, ...
H5 WebSocket 如何和C#进行通信
HTML5作为下一代的 Web 标准, 拥有许多引人注目的新特性,如 Canvas.本地存储.多媒体编程接口.WebSocket 等.WebSocket 在浏览器和服务器之间提供了一个基于 TCP 连 ...

随机推荐

NSNotification的使用（对观察者模式最通俗、易懂的讲解）
这是一个观察者模式. 首先在你需要监听的类中加入观察者: - (void)addObserver:(id)observer selector:(SEL)aSelector name:(NSString ...
windows7文件共享详细步骤图解
windows7文件共享详细步骤图解 http://wenku.baidu.com/link?url=PROjBfZ0KZFiAlgpb6sdaZBnSzFNTx3Ui_YXs5-IVoKBf2pPN ...
java.lang.IllegalArgumentException: No converter found for return value of type: class XXX.XXXX
最近项目中用到fastjson做接口数据的转换,发现报这个错误了,环境是springMVC4,看到阿里的官网说是“ 如果是使用 XML 的方式配置 Spring MVC 的话,只需在 Spring M ...
[Android Security] APK自我保护 - 字符串处理
cp : https://segmentfault.com/a/1190000005128037 在开发过程中字符串不可避免,但是这些字符串也可能是破解的关键点,比如服务器的地址和错误提示这些敏感的字 ...
为何要对URL进行编码
为何要对URL进行编码我们都知道Http协议中参数的传输是"key=value"这种简直对形式的,如果要传多个参数就需要用“&”符号对键值对进行分割.如"?na ...
Java和C#差异点
语法:----------------------------------------------------------1. Java的byte为-128~127相当于c#的sbyte,c#byte ...
jetty+mongodb 配置session外部数据库存储
monbgodb简介主页 http://www.mongodb.org/ oschina.net 介绍页 http://www.oschina.net/p/mongodb MongoDB是一个介于关 ...
Dubbo的一些编码约定和设计原则
编码约定代码风格 Dubbo 的源代码和 JavaDoc 遵循以下的规范: Code Conventions for the Java Programming Language How to Wri ...
uva 331 Mapping the Swaps 求交换排序的map 纯DFS
给出一个序列,每次交换两个数,求有几种交换方法能使序列变成升序. n不大于5,用dfs做. 代码: #include <cstdio> #include <cstring> # ...
奇怪吸引子---AnishchenkoAstakhov
奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...

websocket与canvas[转]

websocket与canvas[转]的更多相关文章

随机推荐

热门专题