黑马程序员技术交流社区

标题: 【上海校区】HTML5的WebSocket的介绍及应用 [打印本页]

---

作者: 懒，羊羊    时间: 2019-3-14 23:11
标题: 【上海校区】HTML5的WebSocket的介绍及应用
前言

最近项目中用到视频直播技术，弹幕用WebSocket制作再合适不过了，上一篇文章讲了html5的sse服务器发送事件，这节课谈谈websocket。及socket.io制作简单聊天室。关于nodejs创建简单的聊天室,我之前的一篇文章写过，具体可以看：http://www.haorooms.com/post/nodejs_rmyyong

创建 WebSocket 对象

用以下 方法 创建 WebSocket 对象。

[JavaScript] 纯文本查看 复制代码

var Socket = new WebSocket(url, [protocol] );

以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议

WebSocket 属性

以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象：

[JavaScript] 纯文本查看 复制代码

Socket.readyState    

只读属性 readyState 表示连接状态，可以是以下值：

[JavaScript] 纯文本查看 复制代码

0 - 表示连接尚未建立。



1 - 表示连接已建立，可以进行通信。



2 - 表示连接正在进行关闭。



3 - 表示连接已经关闭或者连接不能打开。

[JavaScript] 纯文本查看 复制代码

Socket.bufferedAmount  

  

只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

WebSocket 事件

[JavaScript] 纯文本查看 复制代码

open    Socket.onopen    连接建立时触发



message    Socket.onmessage    客户端接收服务端数据时触发



error    Socket.onerror    通信发生错误时触发



close    Socket.onclose    连接关闭时触发

WebSocket 方法

以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：

[JavaScript] 纯文本查看 复制代码

Socket.send()     使用连接发送数据

Socket.close()    关闭连接

nodejs启动服务：

[JavaScript] 纯文本查看 复制代码

var app = require('http').createServer()

var io = require('socket.io')(app);



app.listen(8008);



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

  socket.emit('news', { hello: 'world' });

  socket.on('my other event', function (data) {

    console.log(data);

  });

});

前台接受，要引入socket.io.js

[JavaScript] 纯文本查看 复制代码

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

  var socket = io('ws://localhost:8008');

  socket.on('news', function (data) {

    console.log(data);

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

  })；

原帖地址：https://www.haorooms.com/post/html5_websocket

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2