13518219792
首先使用node.js 搭建一个简易的 websocket服务器：
德宏州ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联建站的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！
var cons = new Array();var ws = require('ws').Server;var server = new ws({ port: 8888 });server.on('connection', function (ws) {console.log('new connection founded successfully');cons.push(ws);ws.on('message', function (data) {for (var i = 0; i cons.length; i++) {cons[i].send(data);}});ws.on('close', function () {for (var i = 0; i cons.length; i++) {if (cons[i] == ws) cons.splice(i, 1);}});});console.log('websocket-server running...');
接下来为了更容易理解， 我在这分为两个页面，一个为视频者页面，另一个是观看者页面
下面代码为视频者页面：
!DOCTYPE htmlhtml xmlns=""headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title/titlescript src="jQuery_1.8.2.min.js"/scriptscript type="text/javascript"$(function () {var video = document.getElementById("video");var canvas = document.getElementById("canvas"),context = canvas.getContext("2d");var w;if (navigator.webkitGetUserMedia) {navigator.webkitGetUserMedia({ video: true }, function (stream) {video.src = window.webkitURL.createObjectURL(stream);video.play();w = new WebSocket(url);w.onopen = function () {sendImg();}w.onmessage = function (e) {sendImg();}}, function () {console.log("video error");});var host = 'localhost';var port = 8888;var url = 'ws://' + host + ':' + port + '/';function sendImg() {context.drawImage(video, 0, 0, 320, 320);var imgData = canvas.toDataURL();w.send(imgData);}}});/script/headbodyvideo id="video" width="640" height="480" style="background:#000;" autoplay/videocanvas style="display:none" id="canvas" width="320" height="320"/canvas/body/html
接下来是观看者页面：
!DOCTYPE htmlhtml xmlns=""headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title/titlescript src="jQuery_1.8.2.min.js"/scriptscript$(function () {var host = 'localhost';var port = 8888;var url = 'ws://' + host + ':' + port + '/';var w = new WebSocket(url);w.onmessage = function (e) {$("#canvas").attr("src", e.data);}});/script/headbodyimg id="canvas" width="320" height="320" / /body/html注：希望可以帮到你!
linux服务器上搭一个支持websocket的web服务器环境，其他的就差不多了。
可以看看php例子，workman
应该是执行顺序的问题，先执行机器人的回复，再执行滚到底部的代码
!DOCTYPE html
html xmlns=""
head
title/title
script type="text/javascript"
var wsServer = 'ws://localhost:9999/webSocket.ashx'; //基于.NET4.5服务器地址
//var wsServer = 'ws://localhost:1818'; //基于.NET服务器地址
var websocket = new WebSocket(wsServer); //创建WebSocket对象
//websocket.send("hello");//向服务器发送消息
//alert(websocket.readyState);//查看websocket当前状态
websocket.onopen = function (evt) {
//已经建立连接
alert("已经建立连接");
};
websocket.onclose = function (evt) {
//已经关闭连接
alert("已经关闭连接");
};
websocket.onmessage = function (evt) {
//收到服务器消息，使用evt.data提取
evt.stopPropagation()
evt.preventDefault()
//alert(evt.data);
writeToScreen(evt.data);
//websocket.close();
};
websocket.onerror = function (evt) {
//产生异常
//alert(evt.message);
writeToScreen(evt.message);
};
function sendMsg() {
if (websocket.readyState == websocket.OPEN) {
msg = document.getElementById("msg").value;
websocket.send(msg);
writeToScreen("发送成功!");
} else {
writeToScreen("连接失败!");
}
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML += message;
output.appendChild(pre);
}
/script
/head
body
div
input type="text" id="msg" value="beyond is number one!" /
button onclick="sendMsg()"send/button
/div
div id="output"/div
/body
/html
H5edu实训html5开发解答
推荐使用websocket，这个东西比较新，用node做后台，比较靠谱，建议可以研究一下这方面的技术，node有一个socket.IO的插件，挺好用。
你是说点击发送就马上显示信息？？？
说下基本思路。。。
1、点击发送的时候把文本框的内容提交到后台。
2、当后台处理反馈成功，做相应的反馈。
3、这里可以有两种方法
1）后台返回成功以后就把内容节点追加到聊天窗口
2）后台返回成功以后就直接刷新聊天窗口（前提是你聊天窗口有取后台数据）
