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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>Insert title here</title>
  6. </head>
  7. <body onload="startServer()">
  8. <canvas id="myCanvas" width="400px" height="500px">myCanvas</canvas>
  9. <canvas id="yourCanvas" width="400px" height="500px">yourCanvas</canvas>
  10. <div id="chatdiv" width="400px" height="500px">chatdiv</div>
  11. <input type="text" id="textMessage" size="20" />
  12. <input type="button" onclick="sendMessage()" value="Send">
  13. <input type="button" onclick="sendphoto()" value="sendphoto">
  14. </body>
  15. <script type="text/javascript">
  16. var myCanvas=document.getElementById("myCanvas");
  17. var context=myCanvas.getContext('2d');
  18. var imagewidth=myCanvas.width;
  19. var imageheight=myCanvas.height;
  20. var yourCanvas=document.getElementById("yourCanvas");
  21. var context2=yourCanvas.getContext('2d');
  22. var image = new Image();
  23. image.src = "haoba.jpg";
  24. image.onload = function(){
  25. context.drawImage(image,0,0);
  26. var imgData=context.getImageData(50,50,200,200);
  27. context2.putImageData(imgData,10,260);
  28. //ctx.putImageData(imgData,200,260,50,50,100,100);
  29. };
  30. var ws = null;
  31. function startServer() {
  32. var url = "ws://192.168.137.27:8081/hao/msg";
  33. if ('WebSocket' in window) {
  34. ws = new WebSocket(url);
  35. } else if ('MozWebSocket' in window) {
  36. ws = new MozWebSocket(url);
  37. } else {
  38. alert('浏览器不支持');
  39. return;
  40. }
  41. ws.binaryType = "arraybuffer";
  42. ws.onopen = function() {
  43. alert('Opened!');
  44. };
  45. // 收到服务器发送的文本消息, event.data表示文本内容
  46. ws.onmessage = function(event) {
  47. if(event.data instanceof ArrayBuffer){
  48. var bytearray = new Uint8Array(event.data);
  49. var tempcanvas = yourCanvas;
  50. tempcanvas.height = imageheight;
  51. tempcanvas.width = imagewidth;
  52. var tempcontext = tempcanvas.getContext('2d');
  53. var imgdata = tempcontext.getImageData(0,0,imagewidth,imageheight);
  54. var imgdatalen = imgdata.data.length;
  55. for(var i=8;i<imgdatalen;i++){
  56. imgdata.data[i] = bytearray[i];
  57. }
  58. tempcontext.putImageData(imgdata,0,0);
  59. var img = document.createElement('img');
  60. img.height = imageheight;
  61. img.width = imagewidth;
  62. img.src = tempcanvas.toDataURL();
  63. var chatdiv=document.getElementById("chatdiv");
  64. chatdiv.appendChild(img);
  65. chatdiv.innerHTML = chatdiv.innerHTML + "<br />";
  66. }else{
  67. alert('Receive message: ' + event.data);
  68. }
  69. };
  70. ws.onclose = function() {
  71. alert('Closed!');
  72. }
  73. ws.onerror = function(err){
  74. alert(err);
  75. };
  76. }
  77. //发送信息
  78. function sendMessage(){
  79. var textMessage=document.getElementById("textMessage").value;
  80. if(ws!=null&&textMessage!=""){
  81. ws.send(textMessage);
  82. }
  83. }
  84. function sendphoto(){
  85. imagedata = context.getImageData(0, 0, imagewidth,imageheight);
  86. var canvaspixelarray = imagedata.data;
  87. var canvaspixellen = canvaspixelarray.length;
  88. var bytearray = new Uint8Array(canvaspixellen);
  89. for (var i=0;i<canvaspixellen;++i) {
  90. bytearray[i] = canvaspixelarray[i];
  91. }
  92. ws.send(bytearray.buffer);
  93. context.fillStyle = '#000000';
  94. context.fillRect(0, 0, imagewidth,imageheight);
  95. }
  96. </script>
  97. </html>

tomcat7下的服务端
HelloWorldWebSocketServlet.java

  1. package com.hao;
  2. import java.io.DataInputStream;
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  5. import java.net.Socket;
  6. import java.net.UnknownHostException;
  7. import java.nio.ByteBuffer;
  8. import java.nio.CharBuffer;
  9. import java.util.ArrayList;
  10. import java.util.HashMap;
  11. import java.util.Map;
  12. import java.util.Random;
  13. import javax.servlet.http.HttpServletRequest;
  14. import org.apache.catalina.websocket.MessageInbound;
  15. import org.apache.catalina.websocket.StreamInbound;
  16. import org.apache.catalina.websocket.WebSocketServlet;
  17. import org.apache.catalina.websocket.WsOutbound;
  18. public class HelloWorldWebSocketServlet extends WebSocketServlet {
  19. public static Map<String,MyMessageInbound> mmiList  = new HashMap<String,MyMessageInbound>();
  20. protected StreamInbound createWebSocketInbound(String subProtocol,
  21. HttpServletRequest arg1) {
  22. return new MyMessageInbound();
  23. }
  24. public int getUserCount(){
  25. return mmiList.size();
  26. }
  27. private class MyMessageInbound extends MessageInbound {
  28. WsOutbound myoutbound;
  29. String mykey;
  30. @Override
  31. public void onOpen(WsOutbound outbound) {
  32. try {
  33. System.out.println("Open Client.");
  34. this.myoutbound = outbound;
  35. mykey =""+System.currentTimeMillis();;
  36. mmiList.put(mykey, this);
  37. System.out.println("mmiList size:"+mmiList.size());
  38. outbound.writeTextMessage(CharBuffer.wrap("open "+mykey));
  39. } catch (IOException e) {
  40. e.printStackTrace();
  41. }
  42. }
  43. @Override
  44. public void onClose(int status) {
  45. System.out.println("Close Client.");
  46. //mmiList.remove(this);
  47. mmiList.remove(mykey);
  48. }
  49. @Override
  50. protected void onBinaryMessage(ByteBuffer arg0) throws IOException {
  51. System.out.println("websocket-----onBinaryMessage:"+arg0.toString());
  52. for (Map.Entry<String, MyMessageInbound> entry : mmiList.entrySet()) {
  53. System.out.println(entry.getKey()+"--bin---");
  54. MyMessageInbound mmib = (MyMessageInbound) entry.getValue();
  55. mmib.myoutbound.writeBinaryMessage(arg0);
  56. mmib.myoutbound.flush();
  57. }
  58. }
  59. @Override
  60. protected void onTextMessage(CharBuffer message) throws IOException {
  61. System.out.println("onText--->" + message.toString());
  62. String[] msgarray= message.toString().split(",");
  63. for (Map.Entry<String, MyMessageInbound> entry : mmiList.entrySet()) {
  64. System.out.println(entry.getKey()+"-----");
  65. MyMessageInbound mmib = (MyMessageInbound) entry.getValue();
  66. CharBuffer buffer = CharBuffer.wrap(message);
  67. System.out.println(buffer);
  68. mmib.myoutbound.writeTextMessage(buffer);
  69. mmib.myoutbound.flush();
  70. }
  71. }
  72. }
  73. }

tomcat的配置文件：

    1. <?xml version="1.0" encoding="ISO-8859-1"?>
    2. <web-app xmlns="http://java.sun.com/xml/ns/javaee"
    3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    4. xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    5. <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"
    6. metadata-complete="true">
    7. <servlet>
    8. <servlet-name>haomsg</servlet-name>
    9. <servlet-class>com.hao.HelloWorldWebSocketServlet</servlet-class>
    10. </servlet>
    11. <servlet-mapping>
    12. <servlet-name>haomsg</servlet-name>
    13. <url-pattern>/hao/msg</url-pattern>
    14. </servlet-mapping>
    15. </web-app>

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

  1. Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏

    Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏 转载 来源:jrainlau 链接:https://segmentfault.com/a/1190000005804860 项 ...

  2. Swoole WebSocket 的应用

    目录 概述 代码 小结 概述 这是关于 Swoole 学习的第三篇文章:Swoole WebSocket 的应用. 第二篇:Swoole Task 的应用 第一篇:Swoole Timer 的应用 什 ...

  3. html5高级

    Html5高级 项目回顾 Day 01 第三阶段知识体系: (1)AJAX异步请求 数据库.PHP.HTTP.原生AJAX.jQuery中的AJAX (2)HTML5高级特性 九大新特性 (3)Boo ...

  4. (视频) 基于HTML5的服务器远程访问工具

    现在云计算这么发达,基本上每个人都多少有几台Windows或者Linux服务器运行在云端,要直接进入这些服务器进行配置就需要使用类似远程桌面或者Putty这类的工具,虽然大多数Windows电脑都自带 ...

  5. node相关--代码共享

    代码共享问题: 是否值得在两个环境中运行同一份代码: //看项目 依赖的API是否在两个环境中都有或有替代: 浏览器提供的标准API:XMLHttpRequest.WebSocket.DOM.canv ...

  6. 使用jQuery AJAX读取二进制数据

    READING BINARY DATA USING JQUERY AJAX http://www.henryalgus.com/reading-binary-files-using-jquery-aj ...

  7. 绝版珍珍藏：web前端技术学习指南

    绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...

  8. Canvas + WebSocket + Redis 实现一个视频弹幕

    原文出自:https://www.pandashen.com 页面布局 首先,我们需要实现页面布局,在根目录创建 index.html 布局中我们需要有一个 video 多媒体标签引入我们的本地视频, ...

  9. H5 WebSocket 如何和C#进行通信

    HTML5作为下一代的 Web 标准, 拥有许多引人注目的新特性,如 Canvas.本地存储.多媒体编程接口.WebSocket 等.WebSocket 在浏览器和服务器之间提供了一个基于 TCP 连 ...

随机推荐

  1. iOS 7.1 系统可以设置 button shapes,此功能可让按钮多一条下滑线

    IniOS 7, Apple completely revamped the user interface to give it a fresh and modern look. One of the ...

  2. 【LeetCode】- Length of Last Word（最后一个单词的长度）

    [ 问题: ] Given a string s consists of upper/lower-case alphabets and empty space characters ' ', retu ...

  3. 架构：The Onion Architecture : part 3（洋葱架构：第三篇）（转载）

    In my previous installments, I described what has become my approach to defining the architecture fo ...

  4. python测试开发django-36.一对一(OneToOneField)关系查询

    前言 前面一篇在xadmin后台一个页面显示2个关联表(OneToOneField)的字段,使用inlines内联显示.本篇继续学习一对一(OneToOneField)关系的查询. 上一篇list_d ...

  5. [转]“菜”鸟理解.NET Framework(CLI,CLS,CTS,CLR,FCL,BCL)

    既然要学.NET,就要先认识认识她,我不喜欢大段大段文字的东西,自己通过理解,画个图,来看看.NET的沉鱼落雁,闭月羞花之容. 最下层蓝色部分是.NET Framework的基础,也是所有应用软件的基 ...

  6. java 8 stream特性

    在Java 8的新功能特性中,最棒的特性就是允许我们去表达我们想要完成什么而不是要怎样做.这正是循环的不足之处.要确保循环的灵活性是需要付出代价的.return.break 或者 continue都会 ...

  7. 监听Listview的滚动状态，是否滚动到了顶部或底部

    /** * @author:Jack Tony * @description : 监听listview的滑动状态,如果到了顶部就刷新数据 * @date :2015年2月9日 */ private c ...

  8. 标准输出中stderr和stdout的区别

    一.首先介绍一下三者printf,sprintf,fprintf的功能 1,printf就是标准输出,在屏幕上打印出一段字符串来. 2,sprintf就是把格式化的数据写入到某个字符串中.返回值字符串 ...

  9. django时区设置以及全球用户如何各自显示当地时间

    在Django的配置文件settings.py中,有两个配置参数是跟时间与时区有关的,分别是TIME_ZONE和USE_TZ 如果USE_TZ设置为True时,Django会使用系统默认设置的时区,即 ...

  10. Team Viewer 远程链接一直显示-"正在初始化显示参数"

    出现这个原因, 原因1: 可能是 通过(mstsc)远程桌面方式运行了teamviewer,被远程控制电脑就会出现这个现象. 可以试一下 服务-teamviewer-属性-登录-本地系统账户 -允许服 ...