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 连 ...
随机推荐
- Iphone控件大全
Iphone的常用控件有哪些?看看下面 一 视图UIView和UIWindow iphone视图的规则是:一个窗口,多个视图.UIWindow相当于电视机,UIViews相当于演员. 1.显示数据的视 ...
- 用xcode 5 开发访问IOS 7上面的通讯录有问题
NSMutableArray *addressBookTemp = [NSMutableArray array]; ABAddressBookRef addressBooks = ABAddressB ...
- iOS 各种控件默认高度(图示)
1.状态栏 状态栏一般高度为20像素,在打手机或者显示消息时会放大到40像素高,注意,两倍高度的状态栏在好像只能在纵向的模式下使用.如下图 用户可以隐藏状态栏,也可以将状态栏设置为灰色,黑色或者半透明 ...
- HTTP协议--MyWebServer
HTTP协议 HTTP协议是一种Web通信协议,通过特定的规则来实现服务器跟客户端的通信.HTTP协议有这样几个特点: (1)面向无连接的,一次只能处理一个请求,HTTP1.0服务器解析完客户端请求并 ...
- libcurl断点下载遇到的问题
最近游戏把资源(图片.配置.lua)的加载.更新全部改了 ,加载其实还好,就是不走之前的zip解压方式. 以前的大体流程: 下载 –> 启动 –> 解压 –> 更新 –> ...
- 用make编译openCV报错:ts_gtest.cpp:(.text._ZN7testing8internal2RED2Ev+0xf): undefined reference to 'regfreeA'
解决方案: the cause is the google tests is looking for the generic regex.h but cmake used the regex.h fr ...
- 升级pip后出现 ImportError: cannot import name main
原文链接 https://blog.csdn.net/accumulate_zhang/article/details/80269313 在Ubuntu中,升级了pip,再次使用pip 安装相关的 ...
- EndNote在Word中插入文献不能自动生成编号 - 解决方案
本文出处:新浪博客“小数码植物摄影”之http://blog.sina.com.cn/s/blog_629be3eb0100sih3.html 新浪博客“小数码植物摄影”首页:http://blog. ...
- J2ee高并发情况下监听器
引言:在高并发下限制最大并发次数,在web.xml中用过滤器设置參数(最大并发数),并设置其它相关參数.具体见代码. 第一步:配置web.xml配置,不懂的地方解释一下:參数50通过參数名maxCon ...
- 【电信我想问一下,网页上多出的隐藏广告】究竟谁在耍流氓,还要不要脸了??? 0817tt 植入广告
最近总是有网页 莫名的有声音,是网页游戏的,一刷新就没了. 这次 我怒了! 我觉得不可能是这个网站的chinaunix的广告.左边是 有广告的,右侧标签 是无广告的. 有广告的 实际上 隐藏了一个页面 ...