用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,如需转载请自行联系原作者
目录
相关文章
|
前端开发 Java 应用服务中间件
SpringBoot整合Netty搭建高性能Websocket服务器(实现聊天功能)
之前使用Springboot整合了websocket,实现了一个后端向前端推送信息的基本小案例,这篇文章主要是增加了一个新的框架就是Netty,实现一个高性能的websocket服务器,并结合前端代码,实现一个基本的聊天功能。你可以根据自己的业务需求进行更改。 这里假设你已经了解了Netty和websocket的相关知识,仅仅是想通过Springboot来整合他们。根据之前大家的需求,代码已经上传到了github上。在文末给出。 废话不多说,直接看步骤代码。
1581 0
SpringBoot整合Netty搭建高性能Websocket服务器(实现聊天功能)
|
网络协议 前端开发 安全
websocket和http的瓜葛以及websocket协议实现
websocket和http的瓜葛以及websocket协议实现
websocket和http的瓜葛以及websocket协议实现
|
JavaScript
js实现websocket实例
js实现websocket实例
193 0
|
消息中间件 网络协议 前端开发
SpringBoot轻松整合WebSocket,实现Web在线聊天室
前面为大家讲述了 Spring Boot的整合Redis、RabbitMQ、Elasticsearch等各种框架组件;随着移动互联网的发展,服务端消息数据推送已经是一个非常重要、非常普遍的基础功能。今天就和大家聊聊在SpringBoot轻松整合WebSocket,实现Web在线聊天室,希望能对大家有所帮助。
SpringBoot轻松整合WebSocket,实现Web在线聊天室
|
网络协议 Linux 网络安全
php实现websocket实时消息推送
php实现websocket实时消息推送
425 0
php实现websocket实时消息推送
|
JavaScript 前端开发 Python
Python编程:tornado实现WebSocket通讯
以下实例有点像广播通讯,支持多个客户端连接 代码参考别人的,稍微做了一点点修改 服务器端 websocket_demo.py
98 0
Python编程:tornado实现WebSocket通讯
|
消息中间件 NoSQL 前端开发
通过WebSocket实现日志打印功能
通过WebSocket实现日志打印功能
681 0
通过WebSocket实现日志打印功能
|
网络协议 安全 Java
用Netty实现WebSocket网络聊天室
用Netty实现WebSocket网络聊天室
166 0
用Netty实现WebSocket网络聊天室
|
存储 JSON 网络协议
关于easyswoole实现websocket聊天室的步骤解析
关于easyswoole实现websocket聊天室的步骤解析
415 0
|
存储 JavaScript 开发者
Vue合理配置WebSocket并实现群聊
Vue合理配置WebSocket并实现群聊
Vue合理配置WebSocket并实现群聊