html5聊天,html5聊天界面代码

用html5 websocket构建聊天室需要哪些技术

linux服务器上搭一个支持websocket的web服务器环境，其他的就差不多了。

可以看看php例子，workman

相关问答

Q1: 如何用html5来实现网页聊天室功能？

推荐使用websocket，这个东西比较新，用node做后台，比较靠谱，建议可以研究一下这方面的技术，node有一个socket.IO的插件，挺好用。

Q2: HTML5，网页聊天界面点击发送消息后怎么让输入框内容清空，并在聊天框显示最新对话内容(自动滚动到底部)

应该是执行顺序的问题，先执行机器人的回复，再执行滚到底部的代码

Q3: html5聊天窗口最后一条消息怎么显示出来

你是说点击发送就马上显示信息？？？

说下基本思路。。。

1、点击发送的时候把文本框的内容提交到后台。

2、当后台处理反馈成功，做相应的反馈。

3、这里可以有两种方法

1）后台返回成功以后就把内容节点追加到聊天窗口

2）后台返回成功以后就直接刷新聊天窗口（前提是你聊天窗口有取后台数据）

Q4: html5可以做在线语音聊天功能吗

首先使用node.js 搭建一个简易的 websocket服务器：

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注：希望可以帮到你!

Q5: 如何建立一个html5 webscoket 实时语音聊天系统

!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开发解答