用socket.io实现WebSocket的一个简单例子-阿里云开发者社区

开发者社区> 余二五> 正文

用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,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10059 0
最简单的基于FFmpeg的直播系统开发移动端例子:IOS 视频解码器
本文记录IOS平台下基于FFmpeg的视频解码器。该示例C语言的源代码来自于《最简单的基于FFMPEG+SDL的视频播放器》。相关的概念就不再重复记录了。
185 0
Java Socket获取本机的InetAddress实例
package com.immooc;/* * InetAddress类 */import java.net.InetAddress;import java.net.UnknownHostException;import java.
874 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13874 0
C#版Websocket实例
Demo地址:www.awbeci.xyz websocket有java、nodejs、python,Php等等版本,我使用的是C#版本,服务器端是Fleck,github地址:https://github.
2236 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11888 0
Lua 服务器Socket通信实例(转)
local socket = require"socket" local host = "127.0.0.1"local port = "843"local sever = assert(socket.
1056 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7360 0
+关注
20382
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载