Skip to content

通过socket.io框架使用websocket技术搭建聊天室

一:什么是WebSocket?

WebSocket 协议在2008年诞生,2011年成为国际标准。所有浏览器都已经支持了。

它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。

其他特点包括:

(1)建立在 TCP 协议之上,服务器端的实现比较容易。

(2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。

(3)数据格式比较轻量,性能开销小,通信高效。

(4)可以发送文本,也可以发送二进制数据。

(5)没有同源限制,客户端可以与任意服务器通信。

(6)协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。

而socket.io则使websocket应用的开发变得简单。

二:用express+socket.io搭建websocket聊天室服务器

1 .用npm初始化服务器程序npm init -y

2.要使用node安装express,socket.io等模块才能搭建websocke服务器npm install express socket.io

3.创建app.js作为服务器的入口

// 使用 express 来开启服务器 
var express = require('express') 
var app = express() 
var http = require('http').createServer(app) 
var io = require('socket.io')(http) app.use(express.static(__dirname)) 
// 设置请求的路径: 
app.get('/', (req, res) => { 
// 返回 index.html 作为客户端 
    res.sendFile(__dirname + '/index.html') }) 
// 开启 weboscket io.on('connection', socket => { 
    console.log('有用户连接上来了') 
    socket.on('sendval', val => { 
    // val.msg 
    // 这个函数就是接收到数据之后的回调函数 
    console.log(socket) 
    console.log('客户端发送的消息为:' + val.msg) 
    // 将浏览器发送的消息,原样返回 
    io.emit('sendval', val) }) }) 
    // 开启监听:端口 3000 ip 地址: localhost/127.0.0.1 
    http.listen(3000, () => { console.log('listening on *:3000') 
})

4.创建用于浏览器访问服务器的客户端HTML页面

<!doctype html> 
<html> 
<head> <title>Socket.IO chat</title> </head> 
<body> 
<ul id="messages"></ul> 
<form action=""> 
<input id="m" autocomplete="off" /><button>Send</button> 
</form> 
</body> 
<!-- 导入 socket.io和jquery --> 
<script src="https://cdn.bootcdn.net/ajax/libs/socket.io/3.0.0-rc4/socket.io.js"></script> 
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
<script> 
$(function () { 
var socket = io('http://localhost:3000/') 
$('form').submit(function (e) { 
e.preventDefault() 
// 发送 
socket.emit('sendval', { msg: $('#m').val() }) 
// 将输入框内容清空 
$('#m').val('') }) 
// 接收服务器的消息 
socket.on('sendval', val => { 
// 将消息渲染到页面上 
$('#messages').append($('<li>').html(val.msg)) }) 
}) 
</script> 
</html>

4.最终形成下面的一些文件

5 运行程序node app.js

三:运行效果

通过浏览器访问 localhost:3000

发送消息,服务器原样返回,使用jquery将消息渲染到页面上

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注