‘壹’ 前端怎么调用socket
<!DOCTYPEhtml>
<metacharset="utf-8"/>
<title>WebSocketTest</title>
<scriptlanguage="javascript"type="text/javascript">
varwsUri="ws://echo.websocket.org/";
varoutput;
functioninit(){
output=document.getElementById("output");
testWebSocket();
}
functiontestWebSocket(){
websocket=newWebSocket(wsUri);
websocket.onopen=function(evt){
onOpen(evt)
};
websocket.onclose=function(evt){
onClose(evt)
};
websocket.onmessage=function(evt){
onMessage(evt)
};
websocket.onerror=function(evt){
onError(evt)
};
}
functiononOpen(evt){
writeToScreen("CONNECTED");
doSend("WebSocketrocks");
}
functiononClose(evt){
writeToScreen("DISCONNECTED");
}
functiononMessage(evt){
writeToScreen('<spanstyle="color:blue;">RESPONSE:'+evt.data+'</span>');
websocket.close();
}
functiononError(evt){
writeToScreen('<spanstyle="color:red;">ERROR:</span>'+evt.data);
}
functiondoSend(message){
writeToScreen("SENT:"+message);
websocket.send(message);
}
functionwriteToScreen(message){
varpre=document.createElement("p");
pre.style.wordWrap="break-word";
pre.innerHTML=message;
output.appendChild(pre);
}
window.addEventListener("load",init,false);
</script>
<h2>WebSocketTest</h2>
<divid="output"></div>
</html>
主要代码解读:
申请一个WebSocket对象,参数是需要连接的服务器端的地址,同http协议使用http://开头一样,WebSocket协议的URL使用ws://开头,另外安全的WebSocket协议使用wss://开头。。
varwsUri="ws://echo.websocket.org/";
websocket=newWebSocket(wsUri);
WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror,
我们可以看出所有的操作都是采用消息的方式触发的,这样就不会阻塞UI,使得UI有更快的响应时间,得到更好的用户体验。
当Browser和WebSocketServer连接成功后,会触发onopen消息;
websocket.onopen=function(evt){
};
如果连接失败,发送、接收数据失败或者处理数据出现错误,browser会触发onerror消息;
websocket.onerror=function(evt){
};
当Browser接收到WebSocketServer发送过来的数据时,就会触发onmessage消息,参数evt中包含server传输过来的数据;
websocket.onmessage=function(evt){
};
当Browser接收到WebSocketServer端发送的关闭连接请求时,就会触发onclose消息。
websocket.onclose=function(evt){
};
WebSocket与TCP、HTTP的关系WebSocket与http协议一样都是基于TCP的,所以他们都是可靠的协议,Web开发者调用的WebSocket的send函数在browser的实现中最终都是通过TCP的系统接口进行传输的。
WebSocket和Http协议一样都属于应用层的协议,那么他们之间有没有什么关系呢?答案是肯定的,WebSocket在建立握手连接时,数据是通过http协议传输的,但是在建立连接之后,真正的数据传输阶段是不需要http协议参与的。
‘贰’ websocket 前端怎么请求
WebSocket的出现是基于Web应用的实时性需要而产生的。这种实时的Web应用大家应该不陌生,在生活中都应该用到过,比如新浪微博的评论、私信的通知,腾讯的WebQQ等。让我们来回顾下实时 Web 应用的窘境吧。
‘叁’ 如何建立WebSocket服务端
其实,在服务器的选择上很广,基本上,主流语言都有WebSocket的服务器端实现,而我们作为前端开发工程师,当然要选择现在比较火热的NodeJS作为我们的服务器端环境了。
NodeJS本身并没有原生的WebSocket支持,但是有第三方的实现(大家要是有兴趣的话,完全可以参考WebSocket协议来做自己的实现),我们选择了“ws”作为我们的服务器端实现。
由于本文的重点是讲解WebSocket,所以,对于NodeJS不做过多的介绍,不太熟悉的朋友可以去参考NodeJS入门指南(http://www.nodebeginner.org/index-zh-cn.html)。
安装好NodeJS之后,我们需要安装“ws”,也就是我们的WebSocket实现,安装方法很简单,在终端或者命令行中输入:
npm install ws
,等待安装完成就可以了。
接下来,我们需要启动我们的WebSocket服务。首先,我们需要构建自己的HTTP服务器,在NodeJS中构建一个简单的HTTP服务器很简单,so easy。代码如下:
var app = http.createServer(onRequest ).listen( 8888 );
onRequest()作为回调函数,它的作用是处理请求,然后做出响应,实际上就是根据接收的URL,在服务器上查找相应的资源,最终返回给浏览器。
在构建了HTTP服务器后,我们需要启动WebSocket服务,代码如下:
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer( { server : app } );
从代码中可以看出,在初始化WebSocket服务时,把我们刚才构建好的HTTP实例传递进去就好。到这里,我们的服务端代码差不多也就编写完成了。怎么样?很简单吧。
‘肆’ web前端可以使用websocket开启服务吗
1 通讯通道选择:这个很多前端高手已经回答了,基本就是两种方式:轮询和长连接,这种情况通常的解决方式是长连接,Web端可以用WebSocket来解决,这也是业界...
‘伍’ js做的前端能通过websocket与c++写的后端交互吗
js做的前端能通过websocket与c++写的后端交互,使用Easywsclient就可以实现。
1、WebSocket 类的写法:
//创建webSocket的工厂方法
static pointer from_url(std::string url);
// 创建一个初始的WebSocket
static pointer create_mmy();
//实现真正的网络连接,发送和接收等IO操作
void poll(int timeout = 0); // 参数是超时时间
//接收返回消息并传到callable中
template<class Callable>
void dispatch(Callable callable);
//发送text类型的消息
void send(std::string message);
//关闭连接
void close();
2、整体实现方法:
#include "easywsclient.hpp"
//#include "easywsclient.cpp" // <-- include only if you don't want compile separately
int
main()
{
...
using easywsclient::WebSocket;
WebSocket::pointer ws = WebSocket::from_url("ws://localhost:8126/foo");
assert(ws);
while (true) {
ws->poll();
ws->send("hello");
ws->dispatch(handle_message);
// ...do more stuff...
}
...
delete ws; // 可选, 使用 unique_ptr<> 如果使用的是 C++11
return 0;
}
‘陆’ 前端项目使用websocket,该如何进行 业务流程的控制
WebSocket的出现是基于Web应用的实时性需要而产生的。这种实时的Web应用大家应该不陌生,在生活中都应该用到过,比如新浪微博的评论、私信的通知,腾讯的WebQQ等。让我们来回顾下实时 Web 应用的窘境吧。
‘柒’ node.js作为单纯的websocket的server端,来完成java的springMVC框架中前端的消息推送,
用node.js安装WebSocket库:
npminstallws
然后建立server:
varWebSocketServer=require('ws').Server
,wss=newWebSocketServer({port:8080});
wss.on('connection',function(ws){
ws.on('message',function(message){
console.log('received:%s',message);
});
ws.send('something');
});
客户端用HTML5标准:
varws=newWebSocket("ws://127.0.0.1:8080/");
ws.onopen=function(){
alert("Opened");
ws.send("I'mclient");
};
ws.onmessage=function(evt){
alert(evt.data);
};
ws.onclose=function(){
alert("Closed");
};
ws.onerror=function(err){
alert("Error:"+err);
};
‘捌’ 问下关于webSocket的服务端怎么创建的问题
在服务器的选择上很广,基本上,主流语言都有WebSocket的服务器端实现,而我们作为前端开发工程师,当然要选择现在比较火热的NodeJS作为我们的服务器端环境了。
NodeJS本身并没有原生的WebSocket支持,但是有第三方的实现(大家要是有兴趣的话,完全可以参考WebSocket协议来做自己的实现),我们选择了“ws”作为我们的服务器端实现。
由于本文的重点是讲解WebSocket,所以,对于NodeJS不做过多的介绍,不太熟悉的朋友可以去参考NodeJS入门指南(http://www.nodebeginner.org/index-zh-cn.html)。
安装好NodeJS之后,我们需要安装“ws”,也就是我们的WebSocket实现,安装方法很简单,在终端或者命令行中输入:
npm install ws
,等待安装完成就可以了。
接下来,我们需要启动我们的WebSocket服务。首先,我们需要构建自己的HTTP服务器,在NodeJS中构建一个简单的HTTP服务器很简单,so easy。代码如下:
var app = http.createServer(onRequest ).listen( 8888 );
onRequest()作为回调函数,它的作用是处理请求,然后做出响应,实际上就是根据接收的URL,在服务器上查找相应的资源,最终返回给浏览器。
在构建了HTTP服务器后,我们需要启动WebSocket服务,代码如下:
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer( { server : app } );
从代码中可以看出,在初始化WebSocket服务时,把我们刚才构建好的HTTP实例传递进去就好。到这里,我们的服务端代码差不多也就编写完成了。怎么样?很简单吧。