用socket.io实现WebSocket的一个简单例子

简介:

用socket.io实现WebSocket的一个简单例子

客户端代码:

Html代码 1.<html> 

2.<head> 

3.    <title></title> 

4.    <script src="../js/socket.io.client.js"></script> 

5.    <script type="text/javascript"> 

6.        function doit() {  

7.            var socket = io.connect('http://localhost');  

8.            socket.on('news', function (data) {//接收到服务器发送过来的名为'new'的数据  

9.                console.log(data.hello);//data为应服务器发送过来的数据。  

10.                socket.emit('my new event', { my:'new data' });//向服务器发送数据,实现双向数据传输  

11.            });  

12.            socket.on('other', function (data) {//接收另一个名为'other'数据,  

13.                console.log(data.hello);  

14.                socket.emit('event1', { my:'other data' });  

15.            });  

16.        }  

17.    </script> 

18.</head> 

19.<body> 

20.<button id='btn' me</button> 

21.</body> 

22.</html> 

<html>

<head>

    <title></title>

    <script src="../js/socket.io.client.js"></script>

    <script type="text/javascript">

        function doit() {

            var socket = io.connect('http://localhost');

            socket.on('news', function (data) {//接收到服务器发送过来的名为'new'的数据

                console.log(data.hello);//data为应服务器发送过来的数据。

                socket.emit('my new event', { my:'new data' });//向服务器发送数据,实现双向数据传输

            });

            socket.on('other', function (data) {//接收另一个名为'other'数据,

                console.log(data.hello);

                socket.emit('event1', { my:'other data' });

            });

        }

    </script>

</head>

<body>

<button id='btn' me</button>

</body>

</html>
复制代码在chrome,Crtl+Shift+j打开终端,可看到输出结果。 
socket.io.client.js可以https://github.com/LearnBoost/socket.io-client下载到本地,在<script src="..">指向本机的js库。

服务器用nodejs实现 
代码

Javascript代码 1.var http= require('http'), io= require('socket.io'), express= require('express');  

2.var app = express.createServer(), io = io.listen(app);  

3. 

4.app.listen(80);  

5. 

6.io.sockets.on('connection', function (socket) {  

7.  socket.emit('news', { hello: 'world' });//监听,一旦客户端连接上,即发送数据,第一个参数'new'为数据名,第二个参数既为数据  

8.  socket.on('my other event', function (data) {//捕获客户端发送名为'my other event'的数据  

9.    console.log(data.my);  

10.  });  

11. 

12.  socket.emit('other', { hello: 'other world' });//发送另一个数据  

13.  socket.on('evnet1', function (data) {//捕获另外一个数据  

14.    console.log(data.my);  

15.  });  

16.}); 

var http= require('http'), io= require('socket.io'), express= require('express');

var app = express.createServer(), io = io.listen(app);

 

app.listen(80);

 

io.sockets.on('connection', function (socket) {

  socket.emit('news', { hello: 'world' });//监听,一旦客户端连接上,即发送数据,第一个参数'new'为数据名,第二个参数既为数据

  socket.on('my other event', function (data) {//捕获客户端发送名为'my other event'的数据

    console.log(data.my);

  });

 

  socket.emit('other', { hello: 'other world' });//发送另一个数据

  socket.on('evnet1', function (data) {//捕获另外一个数据

    console.log(data.my);

  });

});
复制代码测试结果,客户端可正常显示

引用
world 
other world


服务器端显示结果: 引用

C:\java\Nodejs>node server2.js

   info  - socket.io started

   debug - client authorized

   info  - handshake authorized 15551970622100878177

   debug - setting request GET /socket.io/1/websocket/15551970622100878177

   debug - set heartbeat interval for client 15551970622100878177

   debug - client authorized for

   debug - websocket writing 1::

   debug - websocket writing 5:::{"name":"news","args":[{"hello":"world"}]}

   debug - websocket writing 5:::{"name":"other","args":[{"hello":"other world"}

]}

   debug - emitting heartbeat for client 15551970622100878177

   debug - websocket writing 2::

   debug - set heartbeat timeout for client 15551970622100878177

   debug - got heartbeat packet

   debug - cleared heartbeat timeout for client 15551970622100878177

   debug - set heartbeat interval for client 15551970622100878177

^C
复制代码










本文转自 wws5201985 51CTO博客,原文链接:http://blog.51cto.com/wws5201985/737003,如需转载请自行联系原作者
目录
相关文章
|
9月前
|
安全 网络安全 数据安全/隐私保护
CocosCreator 面试题(十四)Cocos Creator WebSocket 、Socket.IO分别是什么?
CocosCreator 面试题(十四)Cocos Creator WebSocket 、Socket.IO分别是什么?
413 0
|
3月前
|
缓存 监控 前端开发
Go 语言中如何集成 WebSocket 与 Socket.IO,实现高效、灵活的实时通信
本文探讨了在 Go 语言中如何集成 WebSocket 与 Socket.IO,实现高效、灵活的实时通信。首先介绍了 WebSocket 和 Socket.IO 的基本概念及其优势,接着详细讲解了 Go 语言中 WebSocket 的实现方法,以及二者集成的重要意义和具体步骤。文章还讨论了集成过程中需要注意的问题,如协议兼容性、消息格式、并发处理等,并提供了实时聊天、数据监控和在线协作工具等应用案例,最后提出了性能优化策略,包括数据压缩、缓存策略和连接管理优化。旨在帮助开发者更好地理解并应用这些技术。
149 3
|
9月前
|
前端开发
t-io websocket的聊天功能学习记录(二)
t-io websocket的聊天功能学习记录(二)
135 0
|
9月前
t-io websocket的聊天功能学习记录(一)
t-io websocket的聊天功能学习记录(一)
150 0
|
9月前
|
缓存 监控 前端开发
【Go 语言专栏】Go 语言中的 WebSocket 与 Socket.IO 集成
【4月更文挑战第30天】本文介绍了在 Go 语言中集成 WebSocket 与 Socket.IO 的相关技术,WebSocket 是一种高效的双向通信协议,Socket.IO 是一个实时通信库,提供丰富的事件处理。集成两者能实现更强大的实时通信功能。文章讨论了 Go 中 WebSocket 的实现,Socket.IO 与 WebSocket 的关系,集成的意义及步骤,并提醒注意协议兼容性、消息格式等问题。此外,还提到了性能优化策略和应用案例,如实时聊天、数据监控和在线协作工具。通过集成,开发者可以构建出满足多样化需求的实时通信应用。
368 0
|
移动开发 监控 网络协议
基于Socket通讯(C#)和WebSocket协议(net)编写的两种聊天功能(文末附源码下载地址)
基于Socket通讯(C#)和WebSocket协议(net)编写的两种聊天功能(文末附源码下载地址)
|
网络协议 API 开发者
百度搜索:蓝易云【Websocket、Socket、HTTP之间的关系。】
总结: HTTP是一种无状态协议,常用于传输静态资源;Socket是一种编程接口,用于实现网络通信;Websocket是在HTTP之上实现的全双工通信协议。它们在通信方式、连接状态和应用场景上存在区别,适用于不同的网络通信需求。
58 0
|
网络协议
一文了解websocket和socket(论点:概念、流程、区别)
一文了解websocket和socket(论点:概念、流程、区别)
|
存储 移动开发 JavaScript
【你的第一个socket应用】Vue3+Node实现一个WebSocket即时通讯聊天室
这篇文章主要是用WebSocket技术实现一个即时通讯聊天室。从0到1一步一步的编写所有代码,上手容易
724 0
【你的第一个socket应用】Vue3+Node实现一个WebSocket即时通讯聊天室
|
前端开发 Python
解决报错:Websocket connection to‘ws://127.0.0.1:5000/socket.io/?EIO=4&transport=websocket’failed:Error
报错全文为:Websocket connection to‘ws://127.0.0.1:5000/socket.io/?EIO=4&transport=websocket’failed:Error during Websocket handshake:Unexpected response code:400。如下图所示。
解决报错:Websocket connection to‘ws://127.0.0.1:5000/socket.io/?EIO=4&transport=websocket’failed:Error

热门文章

最新文章